Problems with aligning div's

[Sunamena]

Hey, I have been googeling, and trying to achieve this with Div's:


1 2 3 4 5


But instead i get:


1 2
3
4
5



What am I doing wrong?



HTML code (i do have images, but i left out that part of the code)

<div id="navbar">

<div id="work">

<img ...>

</div>

<div id="about">

<img ...>

</div>

<div id="foto">

<img ...>

</div>

<div id="language">

<img ...>

</div>

<div id="contact">

<img ...>

</div>

</div>

CSS code

#navbar {width:100%;

background-color:rgba(255,255,255,0);

}

#work {width:15%;

float:left;

}

#about {margin-left:15%;

width:15%;

}

#foto {margin-left:30%;

width:40%;

}

#language {margin-left:70%;

width:15%;

}

#contact {margin-left:85%;

width:15%;

}














Thanks in advance =D

 

[davej]

Put a temporary visible border on each div and float all of them left.

[Sunamena]

Solved, thanks! =D

[dsonesuk]

1) You don't require 100% width on #navbar, by default it will fill the space available to it.

2) I don't know why you have left margin as you have.

3) If number of menu div widths equals 100%, adding borders the width will be 100% + 10 x border width result in the last menu div stacking below the others.

[Sunamena]

1) You don't require 100% width on #navbar, by default it will fill the space available to it.

2) I don't know why you have left margin as you have.

3) If number of menu div widths equals 100%, adding borders the width will be 100% + 10 x border width result in the last menu div stacking below the others.

 

 

1. Thanks, I have learned something new =3

2. I have removed the margin =3

3. When i try to add a border, and give a % number, it does not show any borders.

 

Either way, my lessons webdesign started again =D

 

We will go deeper this half year on positioning elements and DIVs =3

 

 

But this forum has realy been a big help in my learning proces =D

[Ingolme]

Unfortunately, borders don't accept percent values for their width. You can set the box-sizing property to include borders within the width of the box, but it will break on IE8 and older.