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


Tags: css,html,center

Problem :


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?



Solution :

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;
}

    CSS Howto..

    How to cycle through divs using left/right

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    How can I have a table with a set height but auto height cells

    HTML/CSS - How do I make divs to size according to their contents?

    HTML Table Header isn't showing, how can it be fixed?

    How to use css to put an item just above the top of the screen?

    CSS How to display an image in the size of a / text line

    How do I get MS Outlook to accept the CSS style display:block?

    How to scroll a fixed div when I resize the browser window

    How do I use li:hover to change the WHOLE li color?

    How do I blur an element with scroll, until it's blurred to a certain point?

    How to distribute floated elements evenly with a dynamic column and row count in CSS?

    How to apply SVG filter to an element?

    How can I improve this markup and CSS to keep things simple and easy to work with?

    How to use bootstrap on Jquery easy ui [closed]

    Jsoup html parsing style="display:none; dont show the link

    How will I change CSS based on classes and id using jQuery

    How do I target only elements that are followed by another (specific) element?

    How to prevent pointer pass through in HTML?

    How to get this hover effect with just CSS

    How do you specify a css property to be applied only if the browser is IE in the stylesheet?

    How to improve this code to combine/compress CSS using PHP [closed]

    How to Change main menu color?

    How to make a horizontal list start in the center of the page?

    How to remove the “Dotted Border” on clicking?

    How does a document reference an SCSS file?

    How to create a css hoverover box with two section

    how to keep my slider horizontally centered?

    how to make zurb foundation framework off canvas look flat

    How to set browser full width navigation?