Jump to content

Aligning divs within parent div


ben03
 Share

Recommended Posts

Hi,

Am sure this should be relatively straight forward, but have looked at it too long...

 

I am trying to get 2 divs to sit next to each other within a parent container. The second div drops to the line below currently. I don't want to set a width on the parent container as the site is responsive. How would I achieve this correctly?

 

Thanks in advance!

Link to comment
Share on other sites

Ok no that didn't work. Maybe I will have to assign widths and then percentages on smaller browsers. I tried giving both 'display:inline-block' but it was having none of it.

 

If anyone can think of a better solution, let me know. Thanks for the help though!

Link to comment
Share on other sites

Post #2 won't work because you are placing a floated element AFTER a non floated block element, the non floated block element will do what it is supposed to do by forcing any element following it down, it does not matter if its width only covers half or quarter of its parents width compared with following sibling being half the width, stacking will occur.

  • Like 1
Link to comment
Share on other sites

<!DOCTYPE html>
<html>
<head>
<style>

#wrapper {/*width:100%; not required because ITS A BLOCK ELEMENT */
}

#leftone {
 background-color: red;
float:left;
}

#rightone {
                
background-color: blue;
}
</style>
</head>
<body>

<div id="wrapper">

<div id="leftone">
    CONTENT
 </div>
  <div id="rightone">
    CONTENT
  </div>
</div>
</body>
</html>

floating leftone first, fixes the stacking problem, note because the following element is block element it fills the remaining area available to it, you could apply float: left; to rightone which cause it to remain butted to leftone but because has no defined width set and floated it will shrink to content within it.

<!DOCTYPE html>
<html>
<head>
<style>

#wrapper {/*width:100%; not required because ITS A BLOCK ELEMENT */ font-size:0;
}
#wrapper > div {display: inline-block; font-size: 16px;}


#leftone {
 background-color: red;

}

#rightone {
                
background-color: blue;
}
</style>
</head>
<body>

<div id="wrapper">

<div id="leftone">
    CONTENT
 </div>
  <div id="rightone">
    CONTENT
  </div>
</div>
</body>
</html>

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...