CSS and DIVs- Design question

[spenland]

Hi guys, I've taken the advice of many web professionals and I'm trying to build a new website using only css and DIV tags with no tables! It seems to be going pretty well, except for a few formatting issues.

Here is my problem. If I have three sections that I want to display side by side horizontally. I first tried to encapsulate these three sections into one div, but that didn't seem to work.

Then I seperated these three sections into seperate divs. The first section displays no problem, but the second and third seem to drop down a few pixels. I coded these sections, (lets call them sec2 and sec3 for reference) with a margin-top = -500px so that they would display next to sec1, but in Internet Exploder sec2 and sec3 seem to drop down a few pixels.

I tried creating sec2 and sec3 without coding a margin-top, and they always just drop right below sec1, which is not what I want.

So I guess my question is, am I doing this correctly? I have a feeling that hard coding the location by pixels may be a problem, but since this is my first experiment with this type of design I could use some pointers.

How would you do it?

Thanks!

[Easywebdev]

Float the sections.

#section1, #section2, #section 3 {
float: left;
}


<div>
<div id="section1"> content </div>
<div id="section2"> content </div>
<div id="section3"> content </div>
<br style="clear: left;" />
</div>

[chebyrashka]

I use a table to do that often... I've done floats many times before as well and works and then breaks down later, depending on what you want to do.

There's not a silver bullet to this and although using pure div's for layout is a worthy goal, a better goal is to design a website that does what you need. Don't get too caught up in all the hype.

[William Satterwhite]

I would think absolute positioning for each div would work too.

[rickbkis]

I think you also have to set the margin-left of subsequent DIVS to clear the previously defined DIVS. Maybe only if you set the width.

For my part, I tried designing a page with CSS and DIVS only, but got blown out of the water by IE's not positioning background images precisely in the DIVS (it worked great in FF).

Had to go back to tables, and even then, I still had to do stupid things like declare a 1px border at the top of some of the TD's to get the background image to move up.

Call me "not a happy camper" on that score.

rickb

[minorgod]

You will never get a 3 column layout to work properly using the standards. You will either have to create conditional stylesheets for IE or use quirks mode by specifying a transitional doctype in your HTML, which defeats the purpose of using the CSS standards and still won't solve all your problems. Every year I revisit this issue and every year I nearly burst into flames out of sheer frustration. I say you do what I did and give up on CSS layout for now unless you can use one of the few layouts that are known to actually work across most browsers without using CSS hacks. I have recently decided to continue using tables for all my real work because they work in ALL browsers and you will save your sanity for something that's actually important such as SEO. And in case you're using CSS because you think it will help your rankings, it won't. Ask any SEO expert and they will tell you that the (important) search engines do not care one bit whether your pages conform to standards or not. Please feel free to read my blog post regarding this issue. I would have posted it here, but it's just a bit too unprofessional and profane for this forum:

http://electrongun.blogspot.com/2006...er-makers.html

[BlackCat2]

If I understood you correctly this site should have an answer for you:

http://blog.html.it/layoutgala/

Good luck, hope that helps.

Heidi

[William Satterwhite]

If you float section 1 left and section 3 right while leaving section 2 alone, that should work. I would think absolute positioning for each div would work as well.

[rms7design]

well... I do all my website using css.... easy as 1-2-3... you float every div. insert the width (make sure the total is not more than the width of the wrapper and that's it... I don't see all the fuss about it.... tables are worse... and when it comes time to make changes across the website.. you will be happy you used css...

see ya

[spellham]

I'm on board with the float method as well. I've designed several sites using pure CSS, <div>, and strict XHTML doctypes that seem to render fine across both IE and FF. Most are 2 column layouts, but all floated and 99% liquid layouts.

There IS certain degree of hype around div/css versus tables - do what works for your site, thinking of maintenance, future changes, etc...

Yes, I have had headaches with CSS and tableless design, but I've worked through it and am sticking with it. Easier to maintain with separate stylesheets in my opinion and the pages are not bloated with table code.

SEO benefit is questionable, but I do know that the pages I've built or redesigned in a tableless format are considerably smaller than tabled designs with the same content. Less markup to wade through and parse for SE's in a tableless page. Read into that what you will: faster loading pages, bandwidth saver, less parsing hassles for the search engines???

[voodooboy]

Originally Posted by chebyrashka

I use a table to do that often... I've done floats many times before as well and works and then breaks down later, depending on what you want to do.

There's not a silver bullet to this and although using pure div's for layout is a worthy goal, a better goal is to design a website that does what you need. Don't get too caught up in all the hype.

I love it when people use the word "hype". It just means they don't know how to do something. Doing a site in CSS is a great venture. You get clean code, an optimized site for SEO, and the readiness to move into the next generation of design. Those that believe it is only hype, will end up playing catch-up when table structure tags become degraded.

To answer the question, I suggest the trusted "search the Internet" process. I have done several sites using all CSS and have had great results. Some of the sites I used to get a handle on doing 3 column layout included:
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://webhost.bridgew.edu/etribou/l...col_footer_02/
http://www.webproducer.at/flexible-layout/
and the list goes on, and on, and on...

Begin by finding the site that matches your needs. Copy the code and adjust, play, and fiddle with it until it works the way you want. It is much easier to start with a base than to start from scratch when you are just learning.

Have fun. Post the url when you have it down so we can see.

[vfilipski]

Thanks for this info - the layouts are VERY helpful when I am trying to troubleshoot a design

Originally Posted by BlackCat2

If I understood you correctly this site should have an answer for you:

http://blog.html.it/layoutgala/

Good luck, hope that helps.

Heidi

[DesignComm]

I would look at doctypes and also look for extra code that text editors sometimes generate. If you're hand coding, obviously you can skip this step, but if you're using Dreamweaver or GoLive, it's a real possibility that this is your problem. Also, make sure that the "px" appears with every measurement.

Good Luck!

[noel_x99]

I learned a lot from the tutorials here:

tutorials.alsacreations.com/deroulant/

[MattE]

This is what i did

#sample{height:205px;}
#sample p {
float:left;
text-align:center;
display:inline;
border:1px solid #ccc;
margin:5px 1px 5px 1px;
background:#ffffff;
width:151px;
height:192px;
}

and in the body

<div id="sample">


your content<</p>



your content</p>



your content</p>



your content</p>
</div>

This worked nicely - see www.caricatureking.com/indexMay06.php to see the result

[cbstomper]

If it was me I would go to the Microsoft web site and down load the trial for Microsoft Expression Web Designer and use it to check your style sheet then you can edit it and see the changes that are made to better understand it.

Want the best web hosting go to (Mod edit: Affiliate link removed) the best 24/7 tech support any where and much much more.

[drummin]

You might want to check out some of these...
http://www.cssplay.co.uk/layouts/index.html

A great site full of CSS design tips.
Drummin

[MuNKyonline]

Originally Posted by rms7design

well... I do all my website using css.... easy as 1-2-3... you float every div. insert the width (make sure the total is not more than the width of the wrapper and that's it... I don't see all the fuss about it.... tables are worse... and when it comes time to make changes across the website.. you will be happy you used css...

see ya

I disagree entirely. There is far more to making a CSS website that displays the same in Firefox and Internet Explorer as you can see if you look at the links in your own signature. I use a hybrid of the two, tables I find are best for creating the main layout and then css is great for controlling the content and menu's. There's absolutely nothing wrong with using tables.

[adbart]

why is everyone so against tables these days? :P

[Peter (IMC)]

www.i-brane.com/cssonly/

I don't know if this is all exactly by the standards, but this generally works pretty well for me.

[JimmiJames]

It all comes down to time. Creating a CSS layout compatible in all browsers is time consuming while a table layout is not.

I love what CSS can do but when you have a certain time frame to build a website, a CSS layout is just not an option for me.

[weslinda]

I'm not sure why all the "fuss" about tables being our enemy. They aren't. While nested tables using 732 cells can be our enemies, using a small single table can work wonders for layout, and save quite a bit of time in the design phase.

If you look at worldfire.com you'll see a site that is xhmtl 1.1 valid, css valid, and very clean, while using "tables". I do all padding, sizing, and layout control with css into the table.

It's such a huge topic that we need tableless design, and yet there isn't a good reason why, other than we're "trying to go where no man has gone before".

A quality site is the objective, not an award on the wall that says, "Hooray, you made a tableless site!" I've built my site to the latest standards, it works across all browsers, and shocker, I used a freaking table.

Now, for those of you so "anti-table" then feel good about your "not so browser" friendly design that isn't handled the same because the browsers don't see all CSS the same, and leave the rest of us real world designers alone.

[spellham]

Originally Posted by weslinda

I'm not sure why all the "fuss" about tables being our enemy. They aren't. While nested tables using 732 cells can be our enemies, using a small single table ca