I want my content div to the right of sidebar

I'm building a page from scratch (to my specs for layout of
other pages in my site), blank HTML, fixed at 780 pixels. I have
all of my divs in place but I want my sidebar (which will be my nav
bar) to the left of the page and all the way down, and to the left
of my content, but my content is positioned under my sidebar and
spans across the width of the page. I want my content to the right
of the sidebar and under the header. Can someone tell me what rules
I should edit to get this to happen.
I attached my code. Thanks.

Hello,
Float the sidebar left, like so:
#sidebar {
font-family: Arial, Helvetica, sans-serif;
background-color: #e8e8e8;
width: 200px;
float: left;
Give the content div a left margin of 210px.
I also added some padding. Adjust as needed.
#content {
background-color: #121922;
padding: 10px;
margin: 0px 0px 0px 210px;
font-family: Arial, Helvetica, sans-serif;
color: #e8e8e8;
The content of the divs will determine the height.
If you want the sidebar to appear to be the same height as
the content div,
check out this technique:
http://www.alistapart.com/articles/fauxcolumns/
Take care,
Tim
"Rock Artist" <[email protected]> wrote in
message
news:[email protected]...
> I'm building a page from scratch (to my specs for layout
of other pages in
> my
> site), blank HTML, fixed at 780 pixels. I have all of my
divs in place but
> I
> want my sidebar (which will be my nav bar) to the left
of the page and all
> the
> way down, and to the left of my content, but my content
is positioned
> under my
> sidebar and spans across the width of the page. I want
my content to the
> right
> of the sidebar and under the header. Can someone tell me
what rules I
> should
> edit to get this to happen.
>
> I attached my code. Thanks.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <title>Photo Gallery</title>
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div id="wrapper">
> <div id="header"></div>
> <div id="sidebar">This will be my navigation bar
with all of my pages
> listed............right here.........</div>
> <div id="content">Content for id "content" Goes
Here and I wonder if I
> fill
> this up some that it will actually move to the right off
my sidebar and it
> did,
> but why is my content section not going all the way to
the top next to the
> header div? Maybe I should give it a fixed size and
float it to the right.
> </div>
> <div id="footer">Content for id "footer" Goes
Here</div>
> </div>
> </body>
> </html>
>

Similar Messages

Can someone tell me how to get a div to the right of current div? See site

I'm tryin so hard to do an all CSS site instead of using tables. Very tough! Can someone look at http://www.duenorthdesign.com/pcm and tell me:
1) How to get a new div to line up to the right of the current (light green) one. Currently it is below it. I"ve tried floating the left one left so the new div would go to the right. Strange results! Tried floating it to the right.... UGH. I've never felt so stupid in my life!
2) Also, why does my content run outside of my div (the light green article)? Shouldn't the div expand accordingly?
Thanks so much, you are all so helpful!

Both your questions can be answered by amending your css selector from this :
.twoColFixLtHdr #container #mainContent #feature2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    line-height: 20px;
    height: 300px;
    width: 300px;
    background-color: rgba(240,244,230,1);
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 5px;
To this:
.twoColFixLtHdr #container #mainContent #feature2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    line-height: 20px;
    width: 300px;
    float: left;
    background-color: rgba(240,244,230,1);
    margin-top: 10px;
    padding: 5px;
and this one:
.twoColFixLtHdr #mainContent {
    padding: 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background-color: #FFF;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 203px;
to this:
.twoColFixLtHdr #mainContent {
    padding: 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background-color: #FFF;
    overflow: hidden;
Then add this one to your css styles:
#feature3 {
float: left;
width: 300px;
margin-left: 20px;
display: inline;

When I open a Bookmark folder , the contents appear to the right and I prefer they appear to the left as they did until I was organizing some folders ?

I recently updated FF and then spent some time organizing and how the dontents of the folders appear to the right and I want them to go back to the left as they have been for as long as I have been using FF

I do not use a Mac, but will try to provide some information.
There is a ''List all tabs'' arrowhead that by default is on the right hand side, and appears once the number of tabs overflows the visible bookmarks toolbar. that may be repositioned, if you customise the toolbars.
There is the bookmarks menu, on my lynux system that drops down left of centre.
There is a sidebar, that I believe is available in all desktop OS s an is on the Left Hand SIde. Finally there is the bookmark library, which effectively is its own window and may be placed as required.
I am wondering if it is the bookmarks sidebar that you normally use, and have lost the option for ?
(Or are you talking about [[Use Tab Groups to organize a lot of tabs|tab groups]] ? or the drop down menu from the [[Bookmarks Toolbar - Display your favorite websites at the top of the Firefox window| Bookmarks toolbar]] ? )

Trouble with IE8 placing div in the right spot. Other browsers work fine.

My layout is working in all browsers (Firefox, Safari, Chrome, Opera, IE6 & 7) but not in IE8 or 9beta.
The trouble is with a div containing text not displaying below a "lightbox gallery". In IE8 the text div jumps up and appears behind the gallery.
I've tried using negative pixel definitions in the css (margin-top, margin-bottom) and other simple tricks to no avail. This site is still in development but I do have a few sample pages online. Here's a link to one. http://www.redhousepottery.com/chimerasite/hanks.html
I have a feeling a css hack is all I need to fix this. I don't have enough practice at this yet. Any help is appreciated!

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Add the above to your meta code to emulate 7.0 and probably fix the problem, at least until you can find a fix in IE8.
Best,
DR

How do I change the bahavior when I tab in a form? When I tab it moved down - I want it to go to the right.

I want to tab through a form in firefox from left to right. When I tab it tabs down. I am on a Max OS X. When I use Safari it works from left to right.

See http://kb.mozillazine.org/accessibility.tabfocus
Note: In OS X (as of 2005-01), if this preference is not explicitly set, the “Full Keyboard Access” setting in System Preferences will be honored. All builds before that date (e.g., Firefox 1.0.x) will ignore that setting.
This pref doesn't exist by default, so if you want to use it instead of the system settings then you need to create a new Integer pref with the name accessibility.tabfocus and set the value to what you want (7 is to tab through all the fields).
See also http://kb.mozillazine.org/about%3Aconfig

Tablet content shifting to the right on preview

my tablet content looks fine until i preview it and then the whole design is shifted to the left. I have checked and all my anchors are set to x:0 this only happens in my tablet version not the iphone or desktop version? any ideas why this would be happening?

I Want Airport - Am I on the right track?

This will seem like a simple question, but I'll ask it any way. How does airport work is it MAC > Airport Express > Internet OR MAC > Airport Express > modem > Internet? Do you need a "domed" base station to be able to connect to the net?
TiBook, 867 & iPod 40gb Mac OS X (10.4.6)

This will seem like a simple question, but I'll ask
it any way. How does airport work is it MAC > Airport
Express > Internet OR MAC > Airport Express > modem >
Internet? Do you need a "domed" base station to be
able to connect to the net?
To connect to the internet, you will need a modem of some sort, so, your second setup scheme is correct. You do not need the Airport Extreme ("domed" base station) to get the internet. The Express works very well for internet connectivity.

I want restore these files to the right place

Hello
have problem
have wiped these files of the folder encoding (System/Library/coreservices/Encodings/):
libArabicConverter.dylib
libCyrillicConverter.dylib
libGreekConverter.dylib
libHebrewConverter.dylib
libJapaneseConverter.dylib
libKoreanConverter.dylib
libLatin2Converter.dylib
libLatin5Converter.dylib
libLatinSuppConverter.dylib
libSimplifiedChineseConverter.dylib
libSymbolConverter.dylib
libThaiConverter.dylib
libTraditionalChineseConverter.dylib
libVietnameseConverter.dylib
And when it prepared the files from the trash folder،، And put it in a folder encoding the appeared following message :
(Sorry, the operation could not be completed because an unexpected error occurred
Error code-8062)
My question now is how re-files to folder?

Hi anas
I forgot to tell you something important
CEMETERY currently can not uninstall what her income!!
do not know what is the cause of it!
That does not make a lot of sense. Is that a Google translation from Arabic?
Anyway it may be unrelated to your stuck files so we shall proceed regardless.
If entered the trash I can watch those files and can to move it to my desktop but can not lay it down in folder encoding.
OK, well that's good. You may as well take them out of the trash and put them elsewhere for the time being, on your Desktop.
It may be the problem is that file or folder permissions have been altered.
So try this.
1. Open Disk Utility (found in Applications/Utilities) and run Repair Permissions.
After that, see if you can move one of the files into the folder as before, by supplying your Admin password when asked to authenticate.
If you still get that error,
2. Restart in Safemode. This will do a directory check.
http://support.apple.com/kb/HT1455?viewlocale=en_US
Restart again this time, normally.
3. If after trying to move it again, you still get that error, you may have to use Terminal to move them. It will consist of four parts separated by a space.
Make room so you can see those files, eg libArabicConverter.dylib
Open Terminal (found in Applications/Utilities) and type
sudo mv
and press the space bar once after mv.
Drag the file libArabicConverter.dylib into the Terminal window and press the space bar once.
Copy and paste into the Terminal window the address /System/Library/Coreservices/Encodings/
what you are doing is 1. with root permissions 2. move 3. a file 4. to this folder.
Press return and type in your Admin password, press return again.
With luck that file should now be back where it belongs.
Repeat for the others.
When finished run Repair Permissions again as you did before, even though this last step is probably not necessary.
Message was edited by: roam

Center div 1 place div 2 to the right of div 1

I'm in the middle of putting together a template, basically I want my content centered on the page, but I want to create a div in the right area for ads.
See link http://www.kiddoclicks.com/
I want the white area to say in line with my main image which is centered.
When I get my white div to center the right div is messed up
any help appreciataed.
Jacey

*Press the F10 key or tap the Alt key to bring up the "Menu Bar" temporarily if the menu bar is hidden.
*Use "Firefox > Options" instead of "Tools > Options" if the menu bar is hidden.
Firefox 4+ versions have two bookmark buttons with a star in the Customize window.<br />
One star button has a drop marker that open a Bookmark menu.<br />
The other star button without the drop marker opens the bookmarks in the sidebar.<br />
You can drag the Bookmarks menu button with the drop marker in the Customize window from the toolbar palette on a toolbar (e.g. Navigation Toolbar or Tab Bar or to the left side of the Bookmarks Menu Items).
You only see the Bookmarks Menu button if the Menu bar with the Bookmarks menu is hidden (View > Toolbars or Firefox > Options).<br />
If the Bookmarks Toolbar is visible then the Bookmarks Menu button is displayed on the Bookmarks Toolbar as part of the Bookmarks Toolbar Items (bookmarks), but you can move it from the right side to the left side of the Bookmarks toolbar if the Customize window is open.<br />
Otherwise the Bookmarks Menu button will appear on the right side of the Navigation Toolbar.

Using JavaScript to extend the height of a DIV to the height of a document or page.

Hello everyone,
How can I use JavaScript to dynamically resize a DIV on a page so that the div extends vertically to the size of the page or document.
I have been experimenting all evening with different methods, some don't even work.
Thanks everyone!
WE

Thanks for responding, I'll gladly explain further, hopefully you can help me.
I have a DIV on the right side of the page (sidebar) it has very little content and does not extend to the botom of the page.
However, I have another DIV with text that extend further down the page.
What I am trying to do is have the sidebar extend to the bottom of the page or window height.
This way as more text is place in the other DIV and the page stretches down, the sidebar stays extend at the bottom.
I know the CSS method but I would like to experiment with JavaScript.
I want to be the cook with many knives!
Thanks for helping!
WE
garywpaul wrote:
I'm not sure I understand you question. It sounds to me like you want div columns to match in size regarless of content amount? If that is the case, you want to use faux columns.
Read about it here:
http://www.paulgdesigns.com/faux-columns.php
If I am not understanding you, post back.
gary

How to stretch content div to bottom of page.

Been messing around with my site so much that I needed to create a new one.
However, I can't get to stretch the content div to the bottom of the page if the content text doesn't fill the page.
I have a footer at the bottom of the page that stretches the full width of the page, so I can't use the trick with the body background.
I found a lot of results on the internet, but I seem to get a little lost.
Can anyone help me?
This is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Schudden fansite</title>



<link href="../css/Noorderzon.css" rel="stylesheet" type="text/css" /></head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1> </h1>
</div>
<div id="mainContent">
<div id="nav"><a href="#" title="Home">Home</a> | <a href="#" title="Biography">Biography</a> | <a href="#" title="News & Updates">News & Updates</a> | <a href="#" title="Gallery">Gallery</a> | <a href="#" title="Portfolio Work">Portfolio Work</a> | <a href="#" title="Links">Links</a> | <a href="#" title="Contact">Contact</a></div>
<p>Main Content</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. P</p>
    <h2> </h2>
    <p> </p>
</div>
<div id="footer">
    <p> </p>
</div>
</div>
</body>
</html>
And this is the CSS code:
@charset "utf-8";
body {
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
background-color: #800000;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
body,td,th {
font-size: 9pt;
color: #333;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
#container {
width: 100%;
text-align: center; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #800000;
padding-bottom: 0px;
top: 0px;
bottom: 0px;
height: 100%;
#header {
width: 960px;
padding-top: 0;
padding-bottom: 0;
height: 160px;
margin-right: auto;
margin-left: auto;
background-color: #DDDDDD;
background-image: url(../images/header.jpg);
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
#mainContent {
width: 960px;
margin-right: auto;
margin-left: auto;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-image: url(../images/mainbg.jpg);
height: 100%;
#nav {
text-align:center;
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000;
font-weight:700;
padding-top:9px;
padding-bottom:10px;
text-decoration:none;
background-image: url(../images/mainbg.jpg);
background-repeat: repeat;
width: 960px;
#nav a {
background:#fff;
color:#000;
text-decoration:none;
#nav a:active {
background:#fff;
color:#800000;
#nav a:hover {
background:#fff;
color:#000;
font-size:10pt;
padding-bottom:2px;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: #800000;
a:link {
color: #000;
a:hover {
color: #800000;
a:active {
color: #369;
a:visited {
color: #369;
#footer {
height: 100px;
width: 100%;
padding-top: 0;
padding-bottom: 0;
background-image: url(../images/bottom.png);
margin-bottom: 0px;
bottom: 0px;
position: fixed;

so Im having an issue that is similar but the fixes arent really working. Here is the site http://upeer.jordanselectronics.com/
I've never worked with a page this short so it was never an issue but I want the content area to stretch 100 percent so it fills the browser window and pushes the footer to the bottom if the page is so short theres no scroll bar. I put height modifiers on the body, the wrapper(container) and the content div but it's still only as tall as the content in the content div.
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
min-height: 100%;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-size: 1em;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
margin: 0 auto;
height: 100%;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
background-image: url(contentbackground.png);
padding: 25px;
min-height: 100%;
/* ~~ The footer ~~ */
.footer {
background-image: url(footerbackground.png);
background-repeat: no-repeat;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.navbar {
background-color: #F00;

My Imac needs a new hard drive. Can anyone help ensure I get the right one?

I have an Imac from around 2008-09. IMac8,1
It's running Mac Os X ver. 10.5.8 and has the stock hard drive in it.
2gb ram
Running a 2.8ghz Intel Core 2 Duo and I think has like 250 gb
I'd like to get something bigger and also upgrade the operating system. Don't need multiple TB's nor can I afford it but want to ensure i get the right thing for my needs.
It won't install adobe photoshop 6 because operating system is too old but don't want to spend money on new operating system with hard drive that keeps failing.
Error code: 4hdd/11/40000000 SATA (0,0) !
Got this error code about a year ago. downloaded a manual fan program that has helped but every third day or so it crashes and when i try reboot i get the dreaded question mark. usually if i let it rest for an hour or two it fires up but i don't want to risk anymore.
any help greatly appreciated.
cheers

I suspect a failed HD, in that case I'd recommend Apple Hardware Test in Extended Mode at least 3x. You will need the original install discs that shipped with the computer, if you do not have them any longer you will need to order a replacement set from Apple by calling AppleCare. You will need a credit card and the serial number of the machine. The cost should be nominal.

Adobe form - Split internal table data & dis on the right and left corner

HI ,
I have a form where i am populating the data via an Internal Table.
The concern i have is i have 100 rows in the table and i want to print the first 10 rows on the right hand side of the page and the next 10 rows on the Left hand side of the page. I want to do this dynamically on multiple pages during run time based on the volume of data in the internal table.
I am sure i cannot dynamically change the interface of the form to allow multiple internal table , Please suggest if there is any other solution.
Thanks in advance
Tk
Edited by: tarunk on Jan 16, 2012 5:56 PM

Hi,
Thank you very much for the input, But my concern is
I have a table with 120 records.
i have three columns which i have it on the right side as well as on the Left side of the page.
EX:
Right Side Left Side
Col1 col2 col3 col1 col2 col3.
Now what i want to do is the first ten rows of the internal table data i want to print it on the Right Side and the Next 10 rows on the Left Side in the same page .
I want to do this on Multiple pages.
please suggest.
Thanks,
Tk

Picture is off to the right side

I have my Apple TV working pretty well, but all of the content is far off to the right side of my Sony HD television. The Sony settings let me fix it a little bit, but there is still content missing to the right side of the picture and lots of blank space off to the left of the picture. Is there a setting in the Apple TV where I can adjust the horizontal position of the picture?
Thanks
Mac mimi Mac OS X (10.3.7)

In the settings menu of Apple TV , at the top is 720P HD and 1080i HD. Using those settings on my Pioneer 50 in Plasma TV made the picture not center.
Lower down in the settings list is 720P 50Hz and 1080i 50Hz. Choosing those settings fixed the problem, and the movie I was watching is now centered.

Is this the right time ???

actually i want to go for ipod classic 80gb....and found many bugs related to the classic....so i jus want to ask is it the right time to buy it or shuld i wait for sum time to let apple solve all issues with classic.I mean if the issues are only software related then they can be solved easily by updates but if the issues are hardware related then i think i should prefer to wait for some time..
also one more thing is apple warranty international???..can i claim it in any country where apple has its subsidies??

A lot of the problems seem to me like they could be fixed by firmware updates, but I guess really only apple can answer that.. Like it could be that firmware updates can squeeze more performance out of the hardware and speed up the interface, but then maybe not.. And some of the other issues are not bugs as such but just things set up differently (like the clock screensaver) I would maybe try and have a go on one if you can and see what you reckon..

I want my content div to the right of sidebar

Similar Messages

Maybe you are looking for