ansaurus

Question

Align div elements next and under each other

Answer 1

+2 A:

replace <div style="width:300px;height:300px;clear:left;"> of Div 3 with <div style="width:300px;height:300px; clear:both; float:left">

full html

<div style="width:300px;height:300px;float:left;">
    DIV 1
</div>

<div style="width:300px;height:300px;float:left;">
    DIV 2
</div>

<div style="width:300px;height:300px; clear:both; float:left">
   DIV 3
</div>

<div style="width:300px;height:300px;float:left;">
   DIV 4
</div>

Paniyar 2010-09-02 07:33:31

Thanks. That was quick and it works :-)

Tim 2010-09-02 07:35:43

always use container div as described by Yi Jiang for avoiding collapses with other html parts.

Paniyar 2010-09-02 07:38:59

Answer 2

+5 A:

Give all of them float: left, then wrap them in a container just wide enough to fit 2 of them, so that the other two gets pushed down. For example,

<div id="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

CSS:

#container {
  width: 600px;
}

#container div {
  float: left;
  height: 300px;
  width: 300px;
}

Edit: If you want more divs inside the ones you already got, then you can always apply the same technique to the children, like

<div id="container">
  <div>
    <div>Inner Div 1</div>
    <div>Inner Div 2</div>
    <div>Inner Div 3</div>
    <div>Inner Div 4</div>
  </div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

Then with CSS, use this additional style:

#container div div {
  float: left;
  height: 150px;
  width: 150px;
}

Yi Jiang 2010-09-02 07:35:07

If i'm using other DIVs inside my DIV1,DIV2,.. would this also work ? e.g. <div> DIV1 <div>OtherElements</div></div>... ??

Tim 2010-09-02 08:05:45

@Tim. Updated the answer - in short, yes

Yi Jiang 2010-09-02 08:24:40

Answer 3

A:

You can achieve it using this:

<body style="width:600px; height:600px;">
<div id="container">
    <div style="width:50%; height:50%;float:left;">
    DIV 1
</div>

    <div style="width:50%; height:50%;float:left;">
    DIV 2
</div>

    <div style="width:50%; height:50%; float:left;">
    DIV 3
</div>
    <div style="width:50%; height:50%;float:left;">
    DIV 4
</div>

</div>
</body>

Obviously by placing the style information in to a CSS file rather than in the HTML.

I would try to avoid setting the width & height to a specific size unless you simply cannot avoid it. It causes lots of issues when viewed on different browsers at different resolutions.

Barry 2010-09-02 07:40:57

"It causes lots of issues when viewed on different browsers at different resolutions. " Mind commenting on this? I don't think that's ever the case unless you forget the reset script. Also, you left a `clear: both` on the third `div` ;)

Yi Jiang 2010-09-02 07:46:56

Barry 2010-09-02 07:54:48

@Barry It probably is - frameworks like 960gs use ridiculously precise `px` values that all add up perfectly to conform to the grid, and it all renders fine across all browsers and resolutions

Yi Jiang 2010-09-02 08:21:16

ansaurus

tags:

views:

answers:

Align div elements next and under each other

related questions