Menu
I have two divs inside a div, I want them both adjacent to each other with a margin of 10px or so separating them but instead they appear one above the other.
<div>
<div class="post" id="fact">
</div>
<div class="post" id="sortbar">
</div>
</div>
Here is my styling:
#fact{width:200px; margin-left:auto; margin-right:auto;} #sortbar{margin-left:auto; margin-right:auto;}
The whole code is within a div container wrapper with these properties:
#wrapper {
float:left;
margin-top:10px;
width:728px;
}
619
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
Instead of using float:left, you can use: "display:inline-block", this will put the div next to each other.
You have two options (choose one or the other but not both).
float: left; on both #fact and #sortbar
display: inline-block; on both #fact and #sortbar
The second option is better because you don't have to fix the clearing and such, as well as the fact that inline-block works a lot better layout-wise than left floating.
85
See this working example. You can copy and paste this HTML & CSS and try it out.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS styling - how to put these two div boxes adjacent</title>
<style type="text/css">
.wrapper .post {
-moz-border-radius:7px 7px 7px 7px;
border:1px solid silver;
float:left;
margin:10px;
min-height:100px;
padding:5px;
width:200px;
}
</style>
</head>
<body>
<h4>CSS styling - how to put these two div boxes adjacent</h4>
<div class="wrapper">
<div class="post">
<div>
Browse (<a href="http://www.google.com/ncr">Google</a>)
</div>
<div>
This is a Div
</div>
<div>
This is a Div
</div>
<div>
This is a Div
</div>
</div>
<div class="post">
<div>
Browse (<a href="http://www.wikipedia.org/">Wikepedia</a>)
</div>
<div>
This is another Div
</div>
<div>
<div>
This is another Div
</div>
<div>
This is another Div
</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
