ansaurus

Question

CSS styling - how to put these two div boxes adjacent

Answer 1

A:

Something like this should do it...

#fact {
    width:200px; 
    float: left;
    margin: 0 10px 0 0;
} 
#sortbar {
    float: left;
}

realshadow 2010-08-22 09:52:31

Answer 2

A:

Add float:left;:

#fact, #sortbar{
  float:left;
  margin-left:10px;
}

See the working demo here.

Sarfraz 2010-08-22 09:53:18

Answer 3

A:

You have two options (choose one or the other but not both).

set float: left; on both #fact and #sortbar
set 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.

Delan Azabani 2010-08-22 09:53:32

THANKS, INLINE-BLOCK WORKS PERFECT

David Willis 2010-08-22 10:27:49

Answer 4

A:

Hi David,

Essentially your #fact and #sortbar divs still have the default 'block' display type which, in simple terms, will put your divs in their own horizontal space. The other answers here show how to use "float" to solve your issue.

Here's some linkage for you:

box model: http://www.w3.org/TR/CSS2/box.html
display css property: http://www.w3schools.com/css/pr_class_display.asp
float tutorial: http://css.maxdesign.com.au/floatutorial/

Dan

Dan Kendall 2010-08-22 09:56:59

Answer 5

+1 A:

See this working example. You can copy and past 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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;Google&lt;/a&gt;)
    </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/"&gt;Wikepedia&lt;/a&gt;)
    </div>
    <div>
    This is another Div
    </div>
    <div>
    <div>
    This is another Div
    </div>
    <div>
    This is another Div
    </div>
</div>
</div>

</body>
</html>

Angkor Wat 2010-08-22 10:14:51

ansaurus

tags:

views:

answers:

CSS styling - how to put these two div boxes adjacent

related questions