Positioning and CSS

[mentalacrobatics]

Hi there
I just discovered this site and have learnt quite a bit in a night of surfing.
Here is my situation.
The css I am battling with is this

#links {
position: absolute;
left: 30px;
width: 155px;
top: 110px;
font-family:verdana, arial, sans-serif;
font-size: 11px;
text-align: right;
}
#content {
position: absolute;
left: 190px;
top: 110px;
width: 400px;
background: #29214A;
color: #ffffff;
font-family:verdana, arial, sans-serif;
font-size: 11px;
margin-left: 5%;
margin-right: 5%;
padding:0px;
text-align: justify;
margin-bottom:0;
padding-bottom:0;
#linksa {
position: absolute;
left: 650px;
width: 155px;
top: 110px;
font-family:verdana, arial, sans-serif;
font-size: 11px;
text-align: left;
}

What I am attempting to create three coloums next to each other in a row.
side – content – sideA in that order.

I encounter the following problems
a.)they look different in various screen sizes in some screens they over lap in large screen sizes wide spaces of white appear between the blocks of text. Any ideas?

b.)The div “links” starts 30px from the left and is 155px wide therefore if I start the middle section “content” 190 px from the left it should be well clear of the 185px (30px + 155 px) that makes up “links” section but in some screen sizes these overlap and in others there is a wide space? What is it about the position that is causing me the grief? I get a similar situation with the div “links” which is on the right hand side.

Thanks for all your help.

[grahamstewart]

Hi MA,

Welcome to Webmasterworld [webmasterworld.com]

Your missing the closing } on content.

And the gap between your divs is caused by the margin-left:5% and margin-right:5% you have set on the content.

Basically it works like this. The width property specifies the width of the content - not the total width of the div.

To calculate the 'total width' you need to add up..

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

As you'll probably figure out, mixing percentage and pixels can make this situation a little complicated (e.g. whats 5% + 10 pixels?)

Hope that helps.

[DrDoc]

Besides, a margin is unnecessary on an absolutely positioned element.

Basically, this is how it works:

margin - the distance between the element and surrounding elements in normal page flow

padding - the distance between the border of the element and its contents

width/height - the actual height/width of the element (does not include borders, padding, or margin)

[mentalacrobatics]

grahamstewart
DrDoc

thank you very much! i'll rush off and try it straight away.

[mentalacrobatics]

This problem was solved using your advice.
Thanks.