Forum Moderators: not2easy
Problem is, I'm having trouble getting started in designing everything with divs instead of tables. I keep drifting back to wanting to just make table cells with the divs, but because CSS is much more functional than tables are, I feel like this is counter-intuitive.
As an example, this is a basic layout of what I am currently working on:
<snip>
My natural inclination is to create divs for each section horizontally (one for the red header, one that contains both the green and yellow columns, and one for the blue footer). This worked mostly as expected.
Next, I added two more divs to contain the green and yellow columns. Problems arose, however, when I added some junk text to see if the page stretched alright - and of course, it didn't. My footer didn't get pushed down, and the green and yellow columns extended right on past (and over) it.
So now I am wondering if I took the right approach from the beginning. Was it right to make divs for each horizontal section, and then further split the middle content section with more divs? Am I making this more complicated than it should be?
For anyone interested in looking at the details, here is a cleaned up version of the code I've written:
Index
<body>
<div id="body_container">
<div id="header">
</div>
<div id="content">
<div id="content_sidebar"></div>
<div id="content_main"></div>
</div>
<div id="footer">
</div>
</div>
</body>Stylesheet
body
{
margin:0px;
padding:0px;
text-align:center;
background: #455367;
}
#body_container
{
margin:0px auto 0px auto;
padding:0px;
width:960px;
text-align:left;
}
#header
{
width:960px;
height:100px;
}
#content
{
width:960px;
}
#footer
{
width:960px;
height:40px;
#content_sidebar
{
float:left;
width:220px;
}
#content_main
{
float:left;
width:740px;
}
}Any and all help is appreciated - I feel like I am on the brink of understanding CSS well enough to really take off with it, but I guess I just need a little extra push from someone. Thanks.
[edited by: swa66 at 9:12 pm (utc) on Jan. 8, 2009]
[edit reason] no presonal URLs, please see ToS and forum charter [/edit]
It might be a cut&pate error, but one of the curly braces in your css seems to be in the wrong spot. Make sure you code validates and has a doctype. I'll make your life a lot easier as well.
On a side note, I am sorry for posting a link to an image hosted on my website - I'll try to pay more attention to the forum rules.
Edit: By the way, what is the best way to place two divs side-by-side without using float? Is this possible?
[edited by: FredFredrickson at 10:17 pm (utc) on Jan. 8, 2009]
Many people who have dealt with tables love using position:absolute, but I don't really recommend using it until you have to (or to just experiment), since it doesn't flow in the document at all. The order of the HTML is not indicative of where the object might be on the page. It's also really annoying for modifying the layout, since you'd need to lots of positions and widths.
Your design layout can work okay, but it's not really necessary to have wrappers for anything that you want to take up less than the whole width. Also the body wrapper shouldn't be necessary since you can apply any styles to your body instead of the wrapper div.
You may or may not want the header div. You may just want to use an H1/H2 element, depending what sort of content is going there.
