Block Help!

[7oxic]

Hey whats up? I'm having some problems and was hoping you guys could help out a new programmer

 

I'm wanting to have 2 different columns of content show up next to each other ( my news articles on the left, and other blocks on right). If you visit this website you will see how I'm trying to do it: http://www.decadora.com/index.html

 

I've tried using different <div> tags, then changing the settings in my style sheet but can't seem to get it to work. The blocks on the right will show up, but will be at the bottom of the blocks on the left side. Please help!

 

Thanks.

[haku]

You can use a structure basically like this:

 

html:

<div id="leftdiv">content</div>
<div id="rightdiv">content</div>

 

Then set your CSS like this:

 

#leftdiv
{
   width: 100px;
   float: left;
}
#rightdiv
{
   padding-left: 100px;
}

 

Just make sure that the width of #leftdiv and the paddingof #rightdiv are the same to start with, and you can work from there to add extra padding or whatnot.

[TheFilmGod]

Let us say you have a parent div called #main:

 

<div id="main">

<div class="left">
  <p>Left Stuff</p>
</div>

<div class="right">
  <p>Right Stuff</p>
</div>

<div class="clear"></div>

</div>

#main {}
#main .left {
float: left;
width: 200px;
}
#main .right {
float: right;
width: 200px;
}
.clear {
clear: both;
}

 

.................

There are better ways to clear the divs, but for the sake of simplicity, I put the clearing div in.

[widox]

I like to start with a functional and tested layout and build off of that.

Check out http://blog.html.it/layoutgala/. They have some good basic structures to build from.