CODEWITHSUNDEEP
css
djs22
djs22

Reputation: 1156

CSS Positioning Elements Next to each other

I wondering if you can help me position 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 of the css because I wasn't sure what exactly would have an effect on this kind of thing. Also, I've tried making sideContent and mainContent display inline but they just seem to disappear. Any idea why?

Upvotes: 24

Views: 183325

Answers (3)

Tom&#225;s Gomez Pizarro
Tom&#225;s Gomez Pizarro

Reputation: 517

You can add "display:flex" property to the parent node so that all child nodes are grouped next to each other

#main{
      display:flex;
}

Upvotes: 8

gianebao
gianebao

Reputation: 18968

If you want them to be displayed side by side, why is sideContent the child of mainContent? make them siblings then use:

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

on both of them.

#mainContent, #sideContent {float:left; display:inline; width: 49%;}

Upvotes: 33

Nikita Rybak
Nikita Rybak

Reputation: 68046

Try float property. Here's an example: http://jsfiddle.net/mLmHR/

Upvotes: 4

Related Questions