homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

box model - how to create horizontal cells

WebmasterWorld Senior Member 10+ Year Member

Msg#: 4462469 posted 2:26 pm on Jun 7, 2012 (gmt 0)

For CSS tableless borders, how do you create two cells next to each other?



WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4462469 posted 3:55 pm on Jun 7, 2012 (gmt 0)

My first reaction since you said "cell" is if it's tabular data, use a table, that's what a table is for.

Otherwise a number of ways. here are the two I use most often, float or absolute. Using this,

<div id="parent">
<p> blah blah blah blah blah</p>
<p> more blah more blah more blah more blah more blah</p>

#parent { width: 95%; margin: 0 auto; overflow:hidden; }
#parent p { width: 48%; float: left; }
#parent p:first-child { margin-right:2%; }

Remembering that floats take the element out of the natural flow, you will need one of three methods to prevent items following it from flowing up around the last floated elements: 1) overflow:hidden on the parent as above 2) also float the parent container which causes the parent to "shrink wrap" around it's floated children 3) add a clearing element immediately after the parent (or the last element INSIDE the parent.)

<div style="clear:both"></div>

Another caveat about floats: you should ALWAYS assign a width to floated elements.

Another way is absolute positioning. I'd previously avoided absolute positioning because it can be problematic as a framework for layout, but thanks to swa66, I have a whole new outlook on absolute positioning. Not all elements need to be absolutely positioned; you need to only apply the position property to the parent to contain absolutely positioned children.

#parent { width: 95%; margin: 0 auto; position:relative; }
#parent p { width: 48%; position:absolute; }
#parent p:last-child { left: 50%; } /* first child defaults to 0,0, last-child top defaults to 0 */

The visual effect of these are identical, which one you use depends on the context of the page itself. I'm sure there are other ways.


WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Msg#: 4462469 posted 12:51 am on Jun 16, 2012 (gmt 0)

So ..now tell him how to create them..the question was "how" not "what"..( be carefull not to trip the "bad words" filter here ) in doing so :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved