[Freckle Face]

Hey Guys/Gals

Im trying to learn css and im greatly stuck on the basics.
I have couloured all the div's in to start with just to get the layout the green white and black box are ment to be inline with one another can anyone give me a little help with the positioning.

I need to know where im going wrong and what I need to look at.

Hotels in Wales - Aberystwyth Park Lodge Hotel, Ceredigion, Wales, UK

Thanks Guys/Gals

CSS:

#container
{
margin: 1em auto;
width: 700px;
text-align: left;
background-color: red;
}
#header
{
height: 350px;
width: 700px;
background-color: fuchsia;
}
#flash
{
height: 300px;
width: 335px;
float: left;
background-color: lime;
margin-left: 0px;
margin-top: 15px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: white;
border-right-color: white;
border-bottom-color: white;
border-left-color: white;
}
#logo
{
height: 300px;
width: 172.5px;
background-color: white;
border: 1px solid white;
margin-top: 15px;
margin-left: 344px;
}
#header_image
{
height: 300px;
width: 172.5px;
background-color: black;
margin-right: 0px;
margin-left: auto;
margin-top: -1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: white;
border-right-color: white;
border-bottom-color: white;
border-left-color: white;
float: right;
}
#mainnav
{
height: 25px;
width: 700px;
background-color: #993300
}
[/color]

[Shiro]

Honestly, your code is a little messed up, so its going to be hard to say for sure. But try floating all three divs to the left, and give all 3 zero side margins. Also, you need to make the containing div a little wider. You have set the total width of the 3 divs to the same width of the containing div, but that doesnt give enough room for borders. Also, I'm not sure that half pixels will work.

[Stickman]

Shorthand helps keep your code readable.

css shorthand - Google Search

[roto]

Yeah, get those border declarations consolidated!

[Freckle Face]

Originally Posted by haku

Honestly, your code is a little messed up, so its going to be hard to say for sure. But try floating all three divs to the left, and give all 3 zero side margins. Also, you need to make the containing div a little wider. You have set the total width of the 3 divs to the same width of the containing div, but that doesnt give enough room for borders. Also, I'm not sure that half pixels will work.

Thanks for that it seems to have solved the problem.
If you can explain to me in retard terms why that worked I'll be very greatful.

[Freckle Face]

Originally Posted by Stickman

Shorthand helps keep your code readable.

css shorthand - Google Search

Really appreciate this.
Im a graphic desiginer long before Im a web developer, so Im all about the neat I'm gonna try to keep it classy!!!!

[Freckle Face]

Originally Posted by roto

Yeah, get those border declarations consolidated!

who said, what to who now?

[roto]

Originally Posted by Freckle Face

who said, what to who now?

Exactly...

[Shiro]

In retard times: "It worked cause it did".

In new design terms:

floating things to the left makes them well...float to the left. They bunch up against each other. As long as the element they are contained in is wide enough to hold them (in this case the div, although if you dont have a containing div it would be the body) then they will all like up from left to right.

Now you had floated the left div to the left, and then gave the middle one a huge left margin. Why this worked is that when you floated the left div, it effectively took it out of the box (or something like that), so that other div couldn't push against it with a margin. So you had to set a large margin to make it be to the right of the floated div.

Now with the spot you had it, the right div, that you floated right, didn't have enough space to fit in between the div and the edge of the containing div, so it bumped down below. Since it was floated right, it stayed on the right.

Disclaimer: I'm no CSS guru, so I could be wrong on some of my reasoning. I kind of knew how to make it work, but I'm not sure if I'm correct on why it wasnt working.