Welcome to WebmasterWorld Guest from 23.20.75.214

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning and CSS

Positioning and CSS

     
4:43 am on Apr 23, 2003 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2003
posts:19
votes: 0


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.

7:56 am on Apr 23, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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.

9:37 am on Apr 23, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


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)

4:09 pm on Apr 23, 2003 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2003
posts:19
votes: 0


grahamstewart
DrDoc

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

4:17 am on May 5, 2003 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2003
posts:19
votes: 0


This problem was solved using your advice.
Thanks.