How to Use CSS Positioning to Create Layouts Without Tables

FabianSmith

14 years ago

How to create CSS layouts without using FLOAT

read this may be you get some help
best of luck

Thanks

{{ DiscussionBoard.errors[3196879].message }}

webpro4hire

14 years ago

I wouldn't say it's hard to do table-less layouts, only requires a good knowledge of the CSS box model. Once you understand how to position, float, margins and padding, you can create well aligned sites without a single table.

A good place to learn all this stuff is on "A List Apart" website.

Cheers,
WP4H

Thanks
2 replies

{{ DiscussionBoard.errors[3197432].message }}

itsinthere 14 years ago

something easy

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body{background: blue}
#grayTable{background: silver; width:560px; padding:20px; overflow:auto; margin: 0 auto;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}/*margin:0 auto centers the table, width is how wide you want it to be ( minus the padding) ;*/
#pinkTable{background:pink; float:right; width:100px; margin: 0 20px 20px 20px; padding:20px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;

}/* width: controls how wide the pink table is. puts space around the area... */
#grayTable h1{margin:0; }
</style>
</head>

<body>

<div id="grayTable">
<div id="pinkTable">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
<h1>This is the content for the gray table</h1>
<p> Note there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p>This is the content for the gray table, note there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
</body>
- Thanks
{{ DiscussionBoard.errors[3198212].message }}

Ambius

14 years ago

Originally Posted by webpro4hire

I wouldn't say it's hard to do table-less layouts, only requires a good knowledge of the CSS box model. Once you understand how to position, float, margins and padding, you can create well aligned sites without a single table.

A good place to learn all this stuff is on "A List Apart" website.

Cheers,
WP4H

the hard part with anything CSS related is cross-browser support. it's very frustrating to spend an hour perfecting your site layout only to open in another browser and see it completely screwed up.

tables do not have any cross-browser issues. so it is much faster to design with them.

there are certain grid layouts that just work better with tables.

that said, I have started to use CSS columns more and more to replace table layouts on my sites but their quirkiness is very annoying. but there are a lot of limitations with tables which is why more people use divs now.

[ 1 ] Thanks
2 replies

{{ DiscussionBoard.errors[3200897].message }}

webpro4hire

14 years ago

Originally Posted by Ambius

the hard part with anything CSS related is cross-browser support. it's very frustrating to spend an hour perfecting your site layout only to open in another browser and see it completely screwed up.

Ambius, you are so right! that is the hard part.

I make things easier by not going too much into 'hardcore" CSS and degrading gracefully. (not always possible, or easy).

Cheers,
WP4H

Thanks

{{ DiscussionBoard.errors[3204263].message }}

tuldok

14 years ago

Originally Posted by Ambius

the hard part with anything CSS related is cross-browser support. it's very frustrating to spend an hour perfecting your site layout only to open in another browser and see it completely screwed up.

my work around on those cross-browser suppport is doing the layout based on ie6 browser
and the probability of not being screwed on other browsers is high, because most of the bugs came from ie so if you eliminate or minimize those bugs then you can attain a well structured and well layouted web site without using multiple css files nor css hacks and tweaks.

Thanks
1 reply

{{ DiscussionBoard.errors[3208086].message }}

Ambius

14 years ago

Originally Posted by tuldok

my work around on those cross-browser suppport is doing the layout based on ie6 browser
and the probability of not being screwed on other browsers is high, because most of the bugs came from ie so if you eliminate or minimize those bugs then you can attain a well structured and well layouted web site without using multiple css files nor css hacks and tweaks.

That's a good idea, in theory, but IE6 handles the box model completely different from every other browser. When you add padding and borders on IE6 they are subtracted from the width of the box instead of added. so when you make a site in IE6 it will all line up but once open in a real browser it will be completely screwed because everything is too big now.
http://www.imustdesign.com/lectures/..._box_model.gif

At this point in time, I have stopped fully supporting IE6... If my page has a major layout flaw that makes the site unusable, then I will fix it. But I no longer waste time fixing cosmetic bugs for IE6 browsers. it's not worth the time/money when less than 5% of web traffic uses IE6.

Thanks
1 reply

{{ DiscussionBoard.errors[3220007].message }}

tuldok 14 years ago

Originally Posted by Ambius

That's a good idea, in theory, but IE6 handles the box model completely different from every other browser...

nope it is not a theory im doing it in practice up to this date and in fact im still supporting ie6 on my codings.. and for the box model issue on ie6 i also overcome that issue, try adding up doctype on your code.. check different doctypes on w3c.org..

cheers.. ^^
- Thanks
{{ DiscussionBoard.errors[3221594].message }}

RyanRobinson

14 years ago

I code all my websites in CSS 2.1 and XHTML and they all display correctly in IE8, Chrome, FF etc. I don't even bother with IE7 and below unless of course the client pays for it.

Like other posters have suggested, get the CSS box model nailed and get clued up on the floats and margin and padding.

In my experience margin and padding is utilised the same across the popular up to date browsers. I guess that's because I use a CSS reset.