Help with CSS code

[kaymeis]

I'm trying to do a two column layout where you have the main content in the middle and a sidebar tot he left of the main content with a background image. But it's not rendering right...Here is the code for the left sidebar and main content

Here is the CSS code for the left sidebar and the main content

Thanx in advance


#left_sidebar{
width:200px;
background-image:url(/FND_Joint/Images/spicy-gizzard.jpg);

padding:2px;
position:absolute;
top:63px;
left:100px;
bottom:0;
}

#main{

width:200px;
padding:10px 2px;
margin: 0 auto;

}


#main h3
{
color:#419b15;
font-size:24px;
font-weight:bold;
margin-bottom:10px;
}

#main p
{
margin:0px 0px 15px 0px;
font-family: 'Gentium Basic', serif;
font-size:15px;
text-align:justify;

}

[robzilla]

Try using CSS tables for multi-column layouts, like so:

#container {
 display: table;
 width: 100%;
}
#sidebar {
 display: table-cell;
 width: 200px;
}
#main {
 display: table-cell;
}

<div id=container>
 <div id=sidebar></div>
 <div id=main></div>
</div>

Good ol' tables are often easier to manage and more predictable than floats or positioning.

[not2easy]

I took a quick look and agree with robzilla. Though no html was specified it seemed apparent that there was nothing in the css to arrange the two primary areas used in this css. With the positioning specified for the left_sidebar and nothing to position the main section, it could appear across the page somewhere. The suggestion that robzilla gives is a simple and popular way to handle layout.

[lucy24]

Good ol' tables are often easier to manage and more predictable than floats or positioning.

And by using the
#blahblah {display: table}
locution instead of forthrightly saying <tr> and <td>, you keep the semantic folks happy ;)

The only drawback is that if your navigation is on the right, you'd want it to display before the stuff on the left on narrower viewports--and that's awfully hard to do with tables. If your navigation is on the left, as seems to be the case here, there are no problems.

[kaymeis]

The 'display table optioned worked..However, the text in the main container has been pushed to the left sidebar, blending in with the sidebar's background image. It has left the main container empty with just the white background.

[robzilla]

Then you probably have an error in your code somewhere, because the contents of #sidebar and #main cannot leave their containers (they're table cells, after all) without any positioning tricks like negative margins. Make sure you use display: table-cell; on #main and #sidebar.

[jsfiddle.net...]

[not2easy]

If the css was left as it was, then that could happen. The css needed to be altered to remove the fixed positoning. By using the css that was included with robzilla's suggestion and adding in only the colors you prefer, it would work. but things such as

position:absolute;
top:63px;
left:100px;

needed to be removed. The positioning is done by the
display: table;
and
display: table-cell;

[kaymeis]

I removed all that code .. Here is the revised code once again.

#container{
max-width:1200px;
margin: 0 auto;
background-color:#fff;
}

#left_sidebar{
width:200px;
background-color:#fff;
background-image:url(/FND_Joint/Images/spicy-gizzard.jpg);
padding:0 20px 10px 20%;
display:table-cell;
}

#main{

width:700px;
padding:0 20px 10px 20px;
display:table-cell;

}


#main h3
{
color:#419b15;
font-size:24px;
font-weight:bold;
margin-bottom:10px;
}

#main p
{
margin:0px 0px 15px 0px;
font-family: 'Gentium Basic', serif;
font-size:15px;
text-align:justify;

}

[lucy24]

Once you're using display: table-cell, you may also want to watch out for overconstrained widths. In tables (whether "real" or CSS-defined), width is best expressed as a percentage. If one element absolutely has to have a specified width, for example to accommodate a background image, then set a width for that element and leave the other elements alone.

[robzilla]

You haven't set display: table; for #container.

[kaymeis]

Robzilla I set display:table for #container. It rather the strecthed the entire container including the left sidebar containing the background image..Even worse, the the text has blended with the stretched background image....I'm getting real frustrated here.

[not2easy]

If the css shown here is all of the css for the page, you should set properties for images so that images stay within their containers and resize according to their container width.
Try this:
img { max-width: 100%; }

Also keep in mind that you are setting a max-width for the #container and a set width for the #left_sidebar and the #main that do not total your max-width limit, so the limit isn't doing anything. Think of each of the <div> elements as a box, their sizes are set in the css and the container has larger limit than the "boxes" it contains so they may not stay where you want them to be.

If this is not going to be a responsive page, set the container width to the total of the width of the two boxes plus their margins. Then you can expect the contents of each "box" to fit within the width you set. Text is controlled by the widths you set, but image size is controlled by its own size, repeat settings and/or container size so long as you have image settings in your css.

[robzilla]

You're setting the left padding of #left_sidebar with a percentage value. That value is calculated to a pixel value using the width of the whole table, not just the left sidebar, so the width of this padding may actually exceed the width of #left_sidebar as a whole, causing your content to be pushed to the right and over #main (depending on how your browser interprets this situation). You won't have this problem if you set the padding with reasonable pixel values.

Furthermore, when you specify fixed widths for the table cells, the container cannot logically be larger than the sum of those cells (plus any padding/spacing applied), yet you're also setting max-width of the container to 1200px (300px larger than 700px+200px). If you want the layout to be flexible, at least one of the cells needs to be flexible, too. For example, if you set the width of the container to 100%, the left sidebar to 200px, and leave the width of main unspecified, main will grow or shrink along with the size of the viewport, but the sidebar will always be 200px.

[kaymeis]

Thnx a lot guys