homepage Welcome to WebmasterWorld Guest from 54.196.201.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Positioning and CSS
Positioning and CSS
mentalacrobatics




msg:1202963
 4:43 am on Apr 23, 2003 (gmt 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.

 

grahamstewart




msg:1202964
 7:56 am on Apr 23, 2003 (gmt 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.

DrDoc




msg:1202965
 9:37 am on Apr 23, 2003 (gmt 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)

mentalacrobatics




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

grahamstewart
DrDoc

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

mentalacrobatics




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

This problem was solved using your advice.
Thanks.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved