Left/Right Div's

[TheServant]

Hi guys,
I have done this before, but I can't figure out why it won't work. If any of you can see my problem, please let me know. Here are the relavent pieces of code.

[HTML]<!-- Main Content -->
<div class="main_con tent">
<!-- Content -->
<div class="content" >
<p>main content</p>
</div> <!-- End of Content -->

<!-- Side Bar -->
<div class="side_bar ">
<p>side content</p>
</div> <!-- End of Sidebar -->
</div> <!-- End of Main Content -->
[/HTML]

[CODE=CSS]body {
background: #CCFFFF;
text-align: center;
margin: 0;
padding: 0;
}
div.main_conten t {
width: 1000px;
height: auto;
margin: 0 auto;
}
div.content {
width: 600px;
height: auto;
text-align: left;
right: 0;
}
div.side_bar {
width: 200px;
height: auto;
left: 0px;
}
[/CODE]

[hsriat]

Give float:right to content and float:left to side bar. No need of left:0px and right:0px though. (That won't work unless position provided)

PS: 600 + 200 = 800, 1000 - 800 = 200. What are you wasting this 200px?

[TheServant]

Give float:right to content and float:left to side bar. No need of left:0px and right:0px though. (That won't work unless position provided)

PS: 600 + 200 = 800, 1000 - 800 = 200. What are you wasting this 200px?

lol, forgot to change it back. That was supposed to be 800 and 200 = 1000. I was just trying to get it to work.

FLOAT!!! hsriat, thanks heaps. I totally forgot about float and couldn't understand how I used to do it, but that was it! Problem solved.

[hsriat]

lol, forgot to change it back. That was supposed to be 800 and 200 = 1000. I was just trying to get it to work.

FLOAT!!! hsriat, thanks heaps. I totally forgot about float and couldn't understand how I used to do it, but that was it! Problem solved.

You are welcome. :)

You could do position:absolu te along with left:0px and right:0px, but that would end up leaving an empty space in between both of the divs if client's screen is more then 1000px wide.

So to make a fluid or liquid page, you can always give width:80%, width:20% apart from left, right and position.

[TheServant]

Hmmm, I am having a problem with the content coming up from underneath. SO whether I do float or use position absolute, the div's underneath the one's being positioned just come up and wreck it. How do I make my main_content div as a solid object so if it's contents are too big it will resize, rather than let them spill out, and also be solid so no divs can move underneath it?

[hsriat]

Hmmm, I am having a problem with the content coming up from underneath. SO whether I do float or use position absolute, the div's underneath the one's being positioned just come up and wreck it. How do I make my main_content div as a solid object so if it's contents are too big it will resize, rather than let them spill out, and also be solid so no divs can move underneath it?

Fixing its width would do. But for that, make one thing sure, don't enter any text as it is. Include it in another div, then put it in the content div.

[TheServant]

This is what I have:
[HTML]<!-- Menu Bar -->
<div class="menu_bar ">
<p>top menu</p>
</div> <!-- End of Menu Bar -->

<!-- Main Content -->
<div class="main_con tent">
<!-- Content -->
<div class="content" >
<p>Content</p>
</div> <!-- End of Content -->

<!-- Content -->
<div class="side_bar ">
<p>side bar</p>
</div> <!-- End of Sidebar -->

</div> <!-- End of Main Content -->

<!-- Footer Bar -->
<div class="menu_bar ">
<p>Footer</p>
</div> <!-- End of Footer Content -->
[/HTML]

[CODE=CSS]div.menu_bar {
width: 100%;
height: 30px; border: ridge;
}
div.main_conten t {
width: 1200px;
height: auto;
border: ridge;
}
div.content {
width: 800px;
height: auto;
text-align: left; border: ridge;
left: 0px;
}
div.side_bar {
width: 200px;
height: auto;
right: 0px; border: ridge;
}
[/CODE]

The page can be viewed here.
I left the borders in so you can see each div.

[hsriat]

Now again you are wasting 200px!

Well I have two options for you. One I already gave you: use float.

Second is:
[CODE=CSS]div.menu_bar {
width: 100%;
height: 30px;
}
div.main_conten t {
width: 100%;
height: auto;
}
div.content {
width: 80%;
height: auto;
text-align: left;
position:absolu te;
left: 0px;
}
div.side_bar {
width: 20%;
height: auto;
position:absolu te;
right: 0px;
}
[/CODE]

And... if you have to apply borders temporarily for debugging, just add
div {border:ridge}

[TheServant]

Thanks for your suggestions, but that footer is still coming up under the menu at the top. I have used your suggested CSS and have a look to see what I mean.

[hsriat]

Dude, remove the HTML comments (<!--html comments-->) from within the CSS code!

They are creating a problem, and not letting browser read the immediately after element.

[TheServant]

All removed, but I still have the problem.

[hsriat]

[code=css]
body {
background: #CCFFFF;
text-align: center;
background-image: url(../pics/site/banner_bg.gif);
background-repeat: repeat-x;
margin: 0;
padding: 0;
position: relative;
}

img {
border:none;
}

div.banner {
margin-top: 20px;
}


a:link {
color: #0066FF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: underline;
color: #00CCFF;
}
a:active {
text-decoration: none;
color: #00CCFF;
}


div.menu_bar {
width: 100%;
height: 30px;
}
div.main_conten t {
width: 100%;
height: auto;
}
div.content {
width: 80%;
height: 500px;/*change to auto later*/
text-align:left;
float:left;
left: 0px;
}
div.side_bar {
width: 20%;
height: auto;
right: 0px;
float:right;
}
img.side_bar {
width: 180px;
height: auto;
}[/code]

See if this is what you want.

And this guy also wants a change from you.

[TheServant]

Thanks for your patience mate. It is looking good on IE, but FF is displaying the footer stuff to the right? Would you do me a big favour and have one more look?

[hsriat]

Well, I see that if you fix height of both content and side bar to 600px, it gives the result you want.

So you can fix their height according to what suits you.

And if possible to keep the whole content in a page, just provide position:absolu te and bottom:0px to the footer.

[TheServant]

Thanks again mate, really appreciate it. When it gets to complicated CSS for site layout I get very tired of using divs and not submitting to the temptation of doing layout with a table!