positioning, floating, or what else?

@gilyotinaMay 02.2007

hi all,

it seems like mine is a very basic question, however i could not find a clear answer so far.

i’m building my page, ~~[url]~~www.gilyotina.com[/url].
at the moment the version online is made with positioning – the main divs are relatively positioned, and the content inside them is absolute. all in px.

however, as i viewed it on a 800×600 screen, only half of the page was shown (because im using overflow:hidden on the entire page). so i thought using percents% would give me what they call liquid, or fluid design. Istarted to change my px to %, but somehow couldnt get the height right. the relative position for the main divs wouldnt be controlled by the top:xx%. with the left values i did not have any problem.

so, i have 2 question.
first, why would the % value for the top (or bottom) wouldnt affect the layout?
and second, i read other threads saying i should use floats…is it true to my case too, as i need to control not only the width (left) but also the height (top) values???

thanku,
g

to post a comment

CSS

9 Comments(s) _↴

@felgallMay 02.2007 — #You control the position of your float by setting margins.

@gilyotinaauthorMay 02.2007 — #yes, but is the float+margin+padding are right for me, or should i use positioning instd?

and can you think of why changing from top:10% to top:20% wont do a thing to my div?

got a bit lost.

@felgallMay 02.2007 — #as long as you don't want two elements to overlay you can position everything on the page most effectively using

width

overflow

margin

padding

float

clear

You only need to use position where you want elements to overlap or move. To overlap elements put a position:absolute inside a position:relative. Only use position:absolute by itself for moving elements.

@gilyotinaauthorMay 02.2007 — #thanks.

what do you mean by "moving"?

for me its very important that nothing will move, but maybe by moving you ment the fluid, liquid, jello layout?

did you take a look at my page?

maybe it will be easier to understand.

www.gilyotina.com

@WebJoelMay 02.2007 — #"Moving" would imply that the content, if centered for instance, would continue to remain centered if the browser window were to be reduced in size, to 800x600 for instance. Reducing the widthmy my browser window to 800x600 'chops off' the right-hand half of your content. It simply disappears.

I'd wrap the white content part in a 'wrapper DIV', assign a [B]style="width:760px; margin:0 auto;"[/B]. It would look exactly the same as it does now, -centered in 1024 screen resolutions, -but also when the window is manually reduced in size, the content 'moves' to remain centered, and visible.

@gilyotinaauthorMay 02.2007 — #so now im REALLY confused.

[COLOR="Red"]i thought that by using percents% and not px, i get a website that's relevant to whatever windowsize, whatever resolution the user uses.[/COLOR]

another thing - i thought of disabling window resizing (or better say, constantly resizing my window to the max, if its possible), and only care of the case that someone watches the page on 600x800 res.

once i use liquid layout, the whole structure gets corrupted. i dont think liquid is good here.

so i should forget about the % then?

and why is it "margin:0 auto"? why both?

@WebJoelMay 02.2007 — #No, percent width is fine. I merely used pixel value to demonstrate 'centering', but if you use "80%" width [I]and[/I] "margin:0 auto;" (I am going to use margin:25px auto;"), you are [I]centering[/I] the div, left-to-right ("auto"), with "25px" margin top. The value are "top-right-bottom-left" so "[B]margin:25px auto 0px auto;"[/B] is saying the same thing, but abbreviated.

Study this quick example:

[B]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">[/B]

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}

</style>

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body>

[B]<div style="[COLOR="Red"]width:80%; margin:25px auto; [/COLOR]padding:25px 15px; border:3px double silver; height:auto;">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>

</div>[/B]

</body>

</html>[/QUOTE] Important parts are in [B]BOLD.[/B] Note too, that you must state a WIDTH for the DIV in order for the margin:25px [B]auto[/B]; to work, and you must [I]also[/I] state a [I]valid !doctype[/I].

@felgallMay 02.2007 — #By moving I mean like being bounced from side to side using Javascript or any other actual movement of the div around the page rather than staying in the one place relative to the surrounding content. If you want it in the same place relative to the surrounding content then you don't need position:absolute.

@gilyotinaauthorMay 03.2007 — #after playing a bit with my css, i understood better what i wanted:

1. nothing should move. when a window is scaled some of the content will not show. no scrolls.

2. if a user has a 800x600 res screen, he should still be able to view the page. still no scrolls. the whole page should "scaled down" to meet the 800x600 screen res.

so as i see it, i should stick to % width and margins for my containing divs,

and keep the inside absolute positioned content (what is inside the white boxes) in px, cm, cm, etc.

am i correct?

Also in #CSS _↴

Flash/CSS div in front of other in FF Problem with list item heights 10px space at top of screen

Success!

Help @gilyotina spread the word by sharing this article on Twitter...

Tweet This

positioning, floating, or what else?

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

positioning, floating, or what else?

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴