Welcome to WebmasterWorld Guest from 18.205.176.100

Forum Moderators: not2easy

Message Too Old, No Replies

Help with CSS code

     
11:10 pm on Dec 19, 2016 (gmt 0)

Full Member

10+ Year Member

joined:Jan 26, 2006
posts: 203
votes: 0


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;

}
12:36 am on Dec 20, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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.
1:33 am on Dec 20, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4394
votes: 314


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.
5:59 am on Dec 20, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15755
votes: 828


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.
7:23 pm on Dec 21, 2016 (gmt 0)

Full Member

10+ Year Member

joined:Jan 26, 2006
posts: 203
votes: 0


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.
7:43 pm on Dec 21, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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...]
8:24 pm on Dec 21, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4394
votes: 314


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;
8:32 pm on Dec 21, 2016 (gmt 0)

Full Member

10+ Year Member

joined:Jan 26, 2006
posts: 203
votes: 0


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;

}
4:35 am on Dec 22, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15755
votes: 828


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.
7:42 am on Dec 22, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


You haven't set display: table; for #container.
9:15 pm on Dec 26, 2016 (gmt 0)

Full Member

10+ Year Member

joined:Jan 26, 2006
posts: 203
votes: 0


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.
10:39 pm on Dec 26, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4394
votes: 314


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.
10:41 pm on Dec 26, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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.
4:45 pm on Jan 2, 2017 (gmt 0)

Full Member

10+ Year Member

joined:Jan 26, 2006
posts: 203
votes: 0


Thnx a lot guys