CODEWITHSUNDEEP
csshtmlcenter
123dcck
123dcck

Reputation: 246

How to make a div to float left/right inside a centered div


when i want to float a child div to left or right inside the centered parent div, the whole design goes left or right, depending on the float. So, how to float a child div and make the centered parent div in the center.

HTML:

<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>

CSS:

#parent{
    padding: 0 auto;
    width: 600px;
}
#child-left{
    float: left;
    width: 300px;
}
#child-right{
    float: right;
    width: 300px;
}



Why does parent div go left/right, and doesn't stay in center? And how to make it to stay in center?

Upvotes: 5

Views: 57180

Answers (3)

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

See the demo 

#parent{
    padding: 0px, auto;
    width: 605px;
  height:200px;
  border:solid 1px #f00;
}
#child-left{
  float: left;
  width: 300px;
  height:200px;
  border:solid 1px #0F0;
}
#child-right{
    float: right;
    width: 300px;
   height:200px;
  border:solid 1px #00F;
}

Upvotes: 6

Saeed
Saeed

Reputation: 3775

For parent div you use this css code

margin:0 auto;
width:980px;

and for child u use this code for float

float:right or left;
width:anypx;

best regards

Upvotes: 3

Andy
Andy

Reputation: 14575

To center the parent element, use margin: 0 auto;

#parent{
    margin: 0 auto;
    width: 600px;
}

There are also lots of spelling mistakes in your code (chile not child), and missing > symbols, fix them before you continue

A working JSFiddle (Click me)

Upvotes: 2

Related Questions