Trying to make a column go under another column (boxes)

[3raser]

Edit: If you have time, can you answer this question I have: I'm trying to become a good website designer, and I'm learning the ropes right now. Is it the "way of a designer" to use <br/> tags to help position stuff? Like with my problem (this topic), would it be professional to use multiple break tags just to get something under something else? I'm planning on releasing all of my designs I make in the future, open-source, and I was wondering if it would be good to have all the <br/> tags in their making things messy.

=====================================================

=====================================================

Here is my style.css file:

 

body {
background-image:url(images/background.png);
background-repeat:repeat-x;
}

a {
color:#3399FF;
text-decoration:none;
}

div.top {
border:1px solid #0000CC;
width:800px;
background-color:#3399FF;
border-bottom:hidden;
}

div.left {
border:1px dotted black;
border-top:hidden;
border-left:hidden;
padding:2px;
text-align:left;
float:left;
width:120px;
}

div.bottomleft {
border:1px dotted black;
border-top:hidden;
border-left:hidden;
padding:2px;
text-align:left;
float:left;
width:120px;
}


div.right {
border:1px dotted black;
border-top:hidden;
border-right:hidden;
padding:2px;
text-align:left;
float:right;
width:120px;
}

div.bottomright {
border:1px dotted black;
border-top:hidden;
border-right:hidden;
padding:2px;
text-align:left;
float:right;
width:120px;
}


div.container {
text-align:left;
width:500px;
}

div.content {
text-align:left;
background-color:white;
width:800px;
border:1px solid #0000CC;
border-top:hidden;
border-bottom:hidden;
}

div.footer {
border:1px solid #0000CC;
width:800px;
text-align:center;
background-color:white;
}

 

What we are looking at is div.right, div.bottomright, div.left, and div.bottomleft. My problem is that when I tried to add div.bottomright and div.bottomleft, they didn't go under their right place. Example:

 

 

This is my actual index.php code:

<div class="left">More content can go over here, on the left column. This is just centered by float:left; in the style.css file. Un-primary content usually goes here.</div><br/>
<div class="bottomleft">More content can go over here, on the left column. This is just centered by float:left; in the style.css file. Un-primary content usually goes here.</div>
<div class="right">More content can go over here, on the left column. This is just centered by float:left; in the style.css file. Un-primary content usually goes here.</div><br/>
<div class="bottomright">More content can go over here, on the left column. This is just centered by float:left; in the style.css file. Un-primary content usually goes here.</div>

[haku]

Quite the opposite. Good web design never uses <br /> tags for positioning. Margins, paddings and floats are what you should be using to position your elements. And sometimes absolute positioning, though if you don't know why you should be using it, you should probably not use it as it is only proper in specific situations.

[3raser]

Quite the opposite. Good web design never uses <br /> tags for positioning. Margins, paddings and floats are what you should be using to position your elements. And sometimes absolute positioning, though if you don't know why you should be using it, you should probably not use it as it is only proper in specific situations.

 

What I thought.

 

But what about my problem also?

[haku]

You didn't really explain what you are trying to achieve.

[3raser]

You didn't really explain what you are trying to achieve.

 

!!??!?!?!?!!??!?!?!?!???!?>@!??@?!?@?!#?@#?$@!#@!$%?@!?#!#?#$!@?$!#@?$!@#$?!@?$?@?????????????????????!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

I am I trying to get the column box div.leftbottom under the other column box div.left, and the same for the div.rightbottom - get that under the column on the right. In the picture they are nearly side-by-side, when I want them under eachother.

[haku]

<div id="left_column">
  <div class="box">
    some stuff
  </div>
  <div class="box">
    some stuff
  </div>
</div>
<div id="right_column">
  <div class="box">
    some stuff
  </div>
  <div class="box">
    some stuff
  </div>
</div>

CSS:

#left_column, #left_column .box
{
  float:left;
}
#left_column .box
{
  clear:left;
}
#right_column, #right_column .box
{
  float:right;
}
#right_column .box
{
  clear:right;
}

 

Play with that.

[James25]

Do not use <br> tags for positioning.

[theverychap]

Indeed, has Haku says, use clears to clear your floats.

 

If you have a box floated left, to get the next element under it you would need to clear:left it...

[Jimania]

use divs

add margins and padding for positioning horizontally and vertically

use "clears" to push divs to another line.

 

not to sound snippy but spend $20 on a Learn CSS Visually book and you will have an "AHA!" moment and then be off and running.