Web design Div/CSS problem

[lamborgini8]

I have been doing web design for some time and for some annoying reason I can create one website perfectly, but then it comes to making another I end up spending hours trying to work out 1 simple problem...

I have a page set up using div id tags and a separate css sheet linked to the page. The problem I have is I need to set the content section to display 5 boxes next to each other...

As simple as that sounds, Dreamweaver is not having any of it. I have 1 main content box set up to contain the 5 boxes and I have set the first of 5 boxes with no problems... Now I need to set the second box, next to the first box on the right of it... Dreamweaver keeps placing the second box underneath the first.

Any ideas how to fix this?

 

[Adamio]

Stick a 5 column table in the main content box and then place the div's inside the cells

 

[jon_r]

Lol! Wrong.

You need to float each of your 5 elements left to get them to sit next to each other in the CSS, assuming the total width of the 5 doesn't exceed the container div.

Div.column. (

Float: left;
Width: xxx px;

Etc etc

 

[Adamio]

Or that

 

[matt|H]

Stick a 5 column table in the main content box and then place the div's inside the cells

Oh dear...

Yeah Jons advise is right, you want to float all the divs left, put them all inside a container div and make sure the container is the same width as the 5 divs inside.

Sent from my iPhone using Tapatalk

 

[micp]

Stick a 5 column table in the main content box and then place the div's inside the cells

Don't do this!
Just float all your elements and you should be okay; you'll have to specify a width for each though.

EDIT: Already beaten to it by jon_r.

 

[lamborgini8]

Stick a 5 column table in the main content box and then place the div's inside the cells

I moved away from using rables as they appear differently in different browsers.

Lol! Wrong.

You need to float each of your 5 elements left to get them to sit next to each other in the CSS, assuming the total width of the 5 doesn't exceed the container div.

Div.column. (

Float: left;
Width: xxx px;

Etc etc

That worked great! Thanks.

 

[matt|H]

I moved away from using rables as they appear differently in different browsers.

Not just that, but tables are there to display tabular information, not to create layouts. It's good practice to forget about tables unless they are required for... well, a table.