Geek Answers Handbook

CSS Positioning Elements Next To Each Other

I am wondering if you can help me position the two divs, mainContent and sideContent next to each other?

HTML:

<div id='main'> <div id='mainContent'> </div> <div id='sideContent'> </div> </div>

CSS: #

 #main { width: 100%; min-height: 400px; background: #0A3D79; /* for non-css3 browsers */ background: -webkit-gradient(linear, left top, left bottom, from(rgb(20,114,199)), to(rgb(11,61,122))); /* for webkit browsers */ background: -moz-linear-gradient(top, rgb(20,114,199), rgb(11,61,122));} /* for firefox 3.6+ */ /*gradient code from http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient*/ #mainContent { width: 75%; margin-top: 20px; padding-bottom: 10px; min-height: 400px; background-color: blue; } #sideContent { width: 22%; margin-top: 20px; padding-bottom: 10px; min-height: 400px; background-color: red; border-style: solid; border-left-width: 3px; border-left-color: white;border-right-width:0px;border-top-width:0px;border-bottom-width:0px;}

I included all css because I was not sure what exactly would matter for these kinds of things. In addition, I tried to do sideContent and mainContent, but they just disappear. Any idea why?

+7
css
source share
3 answers

If you want them to appear side by side, why is sideContent a child of mainContent? make them brothers and sisters, then use:

 float:left; display:inline; width: 49%;

on both of them.

 #mainContent, #sideContent {float:left; display:inline; width: 49%;}
+10
source share

Try the float property. Here is an example: http://jsfiddle.net/mLmHR/

+1
source share

If you don’t know how many elements will be used or want them to have a normal width, the only way is to use a table:

 <div id='main'> <table> <tbody> <tr> <td><div id='mainContent'></div></td> <td><div id='sideContent'></div></td> </tr> </tbody> </table> </div>
0
source share

More articles:


All Articles