Welcome to WebmasterWorld Guest from 107.20.110.201

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning and CSS

Positioning and CSS

     

mentalacrobatics

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

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



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

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

10+ Year Member



grahamstewart
DrDoc

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

mentalacrobatics

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

10+ Year Member



This problem was solved using your advice.
Thanks.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month