PLEASE HELP: Coding in CSS - How to creat column's?

Basically I am just trying to set up the layout and am completely lost.

I have taken to screen shots and with each I will show what I did, I highlighted the problems in red within the screen shots. at the bottom I will provide both my css and html for the parts that you see in the screen shot:

Attempt #1 (No Float: left):


Attepmt#2 (With float: left)

Thank you for your inputs everyone!

 

The reason there is no background image showing up is because when you float something it's taken out of the flow of the document. So, technically slider class does not have content to have a background image. Try clearing the float.i.e. add <div class="clear"></div> after centercol and rightcol classes and before end of slider. (clear class being clear:both; )

I think it should solve your problem of not having a background image.

 

Thank you for the reply, I did that and yes my background image is back however, Is has lost the column format (like in attemp #1 in my above images).

The good news is the gap is gone between the content area and menu as I showed in Attempt #1 aswell.

So now the only problem is: how do I get the text boxes to line up in column format?

Thank you again!

 

Try floating the right column to the right and if there is a gap try pushing it to the left by giving a right margin.

If that doesn't do good, try clearing the mainmenu div before the start of slider div.

You can check this easily if you could get the web developer toolbar, which is a free addon for firefox. And go to information and enable the Display element information.

Once this is done, you would be able to view your block level elements highlighted in red when you mouseover them.

Hope this helps and keep me posted.

 

Hi,

Awsome plug in! However it didnt do the trick, however, we are getting closer to solving this problem. Here is a new look at my code and what I am seeing:




The HTML:

The CSS

Thank you again everything helps!

 

try my sample, remove the border if you don't want it
the border just want to show where's the column

<style>
.mainmenu {
width: 934px;
height: 40px;
}

.slider {
width: 934px;
height: auto;
background-image: url(images/slider/slider.jpg);
background-repeat:repeat-y;
}

.lowheader {
width: 934px;
height: 30px;
}

.centercol {
float:left;
display:inline;
width: 600px;
border:1px solid blue;
}

.rightcol {
float:right;
display:inline;
width: 160px;
border:1px solid red;
}

.clear {
clear: both;
} 
</style>
<div class="mainmenu">
<img src="images/mainmenu/mainmenu_01.jpg" /><img src="images/mainmenu/mainmenu_02.jpg" /><img src="images/mainmenu/mainmenu_03.jpg" /><img src="images/mainmenu/mainmenu_04.jpg" /><img src="images/mainmenu/mainmenu_05.jpg" /><img src="images/mainmenu/mainmenu_06.jpg" /><img src="images/mainmenu/mainmenu_07.jpg" /><img src="images/mainmenu/mainmenu_08.jpg" /><img src="images/mainmenu/mainmenu_09.jpg" />
</div>

<div class="slider">
    <div class="centercol">Content for class "centercol" Goes Here</div>
    <div class="rightcol">Content for class "rightcol" Goes Here</div>
</div>
<div class="clear"></div>

<div class="lowheader">
<img src="images/lowheader/lowheader_01.jpg" /><img src="images/lowheader/lowheader_02.jpg" /><img src="images/lowheader/lowheader_03.jpg" />
</div> 

Code (markup):

 

Worked absolutely perfect! Thank you!