Lately I'm finding a lot of absolute divs

M

Mr Bean

Like that below.

Perfectly flexible, easy to use.

Any pro or con's?

-----------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</script><title>No title</title>

<style>

body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 100%;
background-color: silver;
/*text-align: center;*/
}


h1, h2, h3, h4 {
margin-top: 12px;;
margin-bottom: 3px;
margin-left: 8px;
font-size: 100%;
font-weight: bold;
color: #0C3865;
clear: both;
}

h2 {
font-size: 98%;
}

h3 {
/*padding-left: 20px;*/
font-size: 95%;
}

h4 {
margin-top: 2px;
padding-left: 2px;
margin-bottom: 2px;
font-size: 93%;
}



p {
display: block;
font-size: 83%;
padding-left: 10px;
margin-top: 2px;
/*text-indent: 1.2em;*/
text-align: left;
margin-bottom: 3px;
clear: both;
}

a, a:active {
font-size: 100%;
/*color: #C61000;*/
font-weight: bold;
color: #0C3865;
text-decoration: underline;
}

a:hover {
text-decoration: underline;
color: #C61000;
}

a:visited {
color: #2c608e;
}


#head {
position: absolute;
top: 0px;
left: 0px;
height: 120px;
width: 100%;
background-color: #FFFFEE;
background-image: url("../img/head_bg01.jpg");
background-repeat: repeat-x;
border: 1px solid #000000;
}

#leftcol {
position: absolute;
top: 123px;
left: 0px;
width: 189px;
border-right: 5px solid #000000;
background-color: #CCBBDD;
}

#rightcol {
position: absolute;
top: 123px;
right: 0px;
width: 181px;
border-left: 5px solid #000000;
background-color: #AACCEE;
}

#end {
clear: both;
margin-top: 2px;
border-top: 3px solid #A1BBE4;
text-align: center;
font-size: 100%;
font-weight: normal;
color: #0C3865;
padding-top: 5px;
background-color: #CCCCFF;
}


..central {
margin-top: 123px;
margin-left: 189px;
margin-right: 182px;
background-color: #FFFFFF;
}


</style>


</head>

<body>

<div id="head">


<h1>Main heading</h1>


</div>



<div id="leftcol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
<p>&nbsp;</div>

<div class="central">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. </p>

</div>


<div id="rightcol">


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>



</div>




</body>
</html>
 
A

APT

Mr Bean said:
Like that below.

Perfectly flexible, easy to use.

Any pro or con's?

-----------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</script><title>No title</title>

<style>

body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 100%;
background-color: silver;
/*text-align: center;*/
}


h1, h2, h3, h4 {
margin-top: 12px;;
margin-bottom: 3px;
margin-left: 8px;
font-size: 100%;
font-weight: bold;
color: #0C3865;
clear: both;
}

h2 {
font-size: 98%;
}

h3 {
/*padding-left: 20px;*/
font-size: 95%;
}

h4 {
margin-top: 2px;
padding-left: 2px;
margin-bottom: 2px;
font-size: 93%;
}



p {
display: block;
font-size: 83%;
padding-left: 10px;
margin-top: 2px;
/*text-indent: 1.2em;*/
text-align: left;
margin-bottom: 3px;
clear: both;
}

a, a:active {
font-size: 100%;
/*color: #C61000;*/
font-weight: bold;
color: #0C3865;
text-decoration: underline;
}

a:hover {
text-decoration: underline;
color: #C61000;
}

a:visited {
color: #2c608e;
}


#head {
position: absolute;
top: 0px;
left: 0px;
height: 120px;
width: 100%;
background-color: #FFFFEE;
background-image: url("../img/head_bg01.jpg");
background-repeat: repeat-x;
border: 1px solid #000000;
}

#leftcol {
position: absolute;
top: 123px;
left: 0px;
width: 189px;
border-right: 5px solid #000000;
background-color: #CCBBDD;
}

#rightcol {
position: absolute;
top: 123px;
right: 0px;
width: 181px;
border-left: 5px solid #000000;
background-color: #AACCEE;
}

#end {
clear: both;
margin-top: 2px;
border-top: 3px solid #A1BBE4;
text-align: center;
font-size: 100%;
font-weight: normal;
color: #0C3865;
padding-top: 5px;
background-color: #CCCCFF;
}


.central {
margin-top: 123px;
margin-left: 189px;
margin-right: 182px;
background-color: #FFFFFF;
}


</style>


</head>

<body>

<div id="head">


<h1>Main heading</h1>


</div>


<div id="leftcol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
<p>&nbsp;</div>

<div class="central">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. </p>

</div>


<div id="rightcol">


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>



</div>




</body>
</html>
Click to expand...

I use absolute div's a lot. I like things to be very precise and, as you
mentioned, it is simpler is many ways.

Though, absolute positioning lacks flexibility. It is hard to get pages to
fill 100% of the screen using strict absolute positioning.

To be honest though, if I understood relative positioning, em spacing and
all that better, I would probably be using it more than absolute. It seems
more flexible.

I'd be interested in hearing from people who use relative positioning to see
what they think.

Steve
 
R

R2G2

I use absolute div's a lot. I like things to be very precise and, as you
mentioned, it is simpler is many ways.

Though, absolute positioning lacks flexibility. It is hard to get pages to
fill 100% of the screen using strict absolute positioning.

To be honest though, if I understood relative positioning, em spacing and
all that better, I would probably be using it more than absolute. It seems
more flexible.

I'd be interested in hearing from people who use relative positioning to see
what they think.

Steve
Click to expand...
I had problems with absolute divs because viewers' different sized
screens, or people using their choice of text size - although it
looked great on my screen the way I'd set it up, if someone was
viewing with larger text size, the text spilled over into the next
box. I mainly use tables for layout now.
 
B

Beauregard T. Shagnasty

R2G2 said:
I had problems with absolute divs because viewers' different sized
screens, or people using their choice of text size - although it
looked great on my screen the way I'd set it up, if someone was
viewing with larger text size, the text spilled over into the next
box.
Click to expand...

Probably because you set the dimensions of your boxes with pixels,
rather than ems which would allow the boxes (divs) to expand along
with the text. It works rather well this way.
I mainly use tables for layout now.
Click to expand...

You gave up too quickly... <g>
 
R

R2G2

Probably because you set the dimensions of your boxes with pixels,
rather than ems which would allow the boxes (divs) to expand along
with the text. It works rather well this way.
Click to expand...
I could have done - I trusted dreamweaver to make them for me, and
understood nothing about html ...
You gave up too quickly... <g>
Click to expand...

Maybe, but I'm learning html and css now, so it was maybe worth
learning the lesson, even if it was really gutting to see how some
others were seeing my site.
 
K

kchayka

Beauregard said:
Probably because you set the dimensions of your boxes with pixels,
rather than ems which would allow the boxes (divs) to expand along
with the text.
Click to expand...

The problem is probably more setting both height and width for text
blocks. Even with ems, text can overflow one or the other dimension. A
lot depends on the font and variables like line-height.

For text blocks that you want to be restricted in some way, it's almost
always best to set a fixed width (ems are good) and let height adjust as
needed.
You gave up too quickly... <g>
Click to expand...

<sigh> These young'ns got no patience. I wonder how many actually RTFM
before, during or after hacking away at CSS? Very few, I'd bet.
 
A

APT

Beauregard T. Shagnasty said:
Probably because you set the dimensions of your boxes with pixels, rather
than ems which would allow the boxes (divs) to expand along with the text.
It works rather well this way.


You gave up too quickly... <g>
Click to expand...

If you really want to hard code the height, then you can use the "overflow"
tag in CSS. Set it to "auto" and it will put a scroll bar on any box that
has over flowing text.

Also, everytime I get frustrated with CSS and return to tables, I end even
more frustrated and go back to CSS.

I like the suggestion for using em spacing instead of pixels. I will have to
try it with the site I am developing now.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help needed with code 5
CSS Layout Issue in IE6 - Example in Book Fails 1
Position 2 DIVs on Single Line 7
expand/collpase all instances of this script on a page 2
Scrolling with mouse wheel 5
expand / collapse all with this script 1
Opera dynamic opacity: solved 1
[SUMMARY] Literate Ruby (#102) 0

Members online

Total: 29 (members: 2, guests: 27)
Robots: 460

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top