I’m working on a site and this is the landing page, each div is position absolute and it seems fine if browser is increased or decreased, but I keep reading that absolute is BAD BAD BAD, so can anyone tell me if I could add these four divs (not nav/logo) into a wrapper or container div? I’ve tried it but it seems to offset the entire layout.
This is my code without the wrapper and I’ve added a screenshot of my page(I know there are some spelling errors ). Any suggestions on how(and also why) I could change the absolute positioning? Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
background-image:url(ReStoreMain.jpg);
max-width: 100%;
max-heght:100%;
background-attachment:fixed;
line-height:1.4;
font-size:88%;
}
#logo {
height:180px;
width:320px;
position:absolute;
top:10px;
left:130px;
}
#add {
width:300px;
height:300px;
position:absolute;
top:10px;
left:830px;
color:#090;
font-family:"Minion Pro", sans-serif;
text-align:right;
}
ul {
list-style-type:none;
margin-top:100px;
margin-left:70px
padding:4px;
overflow:hidden;
position:absolute;
left: 465px;
width: 830px;
height: 58px;
top: 50px;
}
li
{
float:left;
}
a:link,a:visited
{
display:inline;
width:150px;
font-weight:bold;
color:#FFFFFF;
background-color:#91E287;
border:1px solid white;
text-align:center;
padding:8px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#74C9E4;
}
#d1 {
width:560px;
height:370px;
background-color: #FFF;
border: 2px solid #74C9E4;
margin-top:175px;
margin-left:120px;
padding:5px;
position:absolute;
}
div#d2 {
width:410px;
height:505px; background-color:#FFF;
border: 2px solid #74C9E4;
margin-top:175px;
margin-left:700px;
padding:5px;
position:absolute;
}
div#d3 {
width:560px;
height:565px; background-color:#FFF;
border: 2px solid #74C9E4;
margin-top:565px;
margin-left:120px;
padding:5px;
position:absolute;
}
div#d4 {
width:410px;
height:430px; background-color:#FFF;
border: 2px solid #74C9E4;
margin-top:700px;
margin-left:700px;
padding:5px;
position:absolute;
}
</style>
</head>
<body>
<div id="logo"> <img src="restorelogo.jpg" width="361" height="168" /></div>
<div id="add"><h2>622 North Market Street<br />Frederick, MD 21701<br />
(301)-662-2988<br /> [email]erestore@frederickhabitat.org[/email]</h2></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Shop</a></li>
<li><a href="#contact">Donate</a></li>
<li><a href="#about">News</a></li>
<li><a href="Habitat">Habitat for Humanity of Frederick County</a></li>
</ul>
<div id="d1"><h1 style="font-size:45px;font-family:'Minion Pro SmBd', 'Minion Pro Med', 'Minion Pro';color:#0C3;"><center>Don't Dump it, Donate it!</center>
</h1>
<p style="font-size:18px;">Habitat ReStore is a home improvement center that sells new and still usable goods to the public at a fraction of retail cost. </p>
<p style="font-size:18px;">Your decision to donate to or shop at Habitat ReStore impacts the Frederick community in a tremendous way. You not only become part of the solution to keep resusable materials out of Frederick County landfills, but you also help local families in need of affoardable housing as money raised at Habitat ReStore directly supports Habitat for Humanity of Frederick County's mission to <em>bring people together to build homes, communities and hope.</em></p>
</div>
<div id="d2"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Habitat-for-Humanity-of-Frederick-Co-ReStore/285362990195&width=407&height=497&colorscheme=light&show_faces=true&border_color&stream=true&header=true&appId=306388216066339" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:407px; height:497px;" allowTransparency="true"></iframe></div>
<div id="d3"><a href="http://www.diggerslist.com/frederickrestore" class="diggerslist-listingsbox" data-height="580" data-title="Just In at ReStore!!" data-width="560"></a><script type="text/javascript" src="http://www.diggerslist.com/js/widgets.js"></script></div>
<div id="d4">
<h3 align="center">Have questions about donating? Email us!</h3>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><iframe width="400" height="370" frameborder="0" src="http://www.foxyform.com/form.php?id=209311&sec_hash=0ae9442063e"></iframe></td></tr><tr><td align="center"></td></tr></table>
</p>
</div>
</body>
You really just need to study this code. Check out how I groupped the HTML (such as the D elements) and look at the header.
Look at the CSS associated wtih each section. Break it down. Floating is the best way to structure a page. This isn’t as good as the code can get, however this is an excellent attempt to get you started on your way :).
Good luck.
Edit-Should attach code…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
background-image:url(ReStoreMain.jpg);
max-width: 100%;
max-heght:100%;
background-attachment:fixed;
line-height:1.4;
font-size:88%;
}
#wrapper
{
width:81%;
margin:0 auto;
overflow:hidden;
}
#header
{
overflow:hidden;
margin-bottom:5px;
}
#logo {
height:180px;
width:361px;
float:left;
}
#add {
width:300px;
float:right;
color:#090;
font-family:"Minion Pro", sans-serif;
text-align:right;
}
ul {
list-style-type:none;
padding:4px;
overflow:hidden;
margin:0;
clear:right;
float:right;
}
li
{
float:left;
}
a:link,a:visited
{
display:inline;
width:150px;
font-weight:bold;
color:#FFFFFF;
background-color:#91E287;
border:1px solid white;
text-align:center;
padding:8px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#74C9E4;
}
#d1 {
width:560px;
height:370px;
background-color: #FFF;
border: 2px solid #74C9E4;
padding:5px;
}
div#d2 {
width:410px;
height:505px; background-color:#FFF;
border: 2px solid #74C9E4;
padding:5px;
}
div#d3 {
width:560px;
height:565px; background-color:#FFF;
border: 2px solid #74C9E4;
padding:5px;
}
div#d4 {
width:410px;
height:430px; background-color:#FFF;
border: 2px solid #74C9E4;
padding:5px;
}
.sidebar
{
float:left;
width:574px;
}
.content
{
float:left;
width:424px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"> <img src="restorelogo.jpg" width="361" height="168" /></div>
<div id="add"><h2>622 North Market Street<br />Frederick, MD 21701<br />
(301)-662-2988<br /> erestore@frederickhabitat.org</h2></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Shop</a></li>
<li><a href="#contact">Donate</a></li>
<li><a href="#about">News</a></li>
<li><a href="Habitat">Habitat for Humanity of Frederick County</a></li>
</ul>
</div>
<div class="sidebar">
<div id="d1"><h1 style="font-size:45px;font-family:'Minion Pro SmBd', 'Minion Pro Med', 'Minion
Pro';color:#0C3;"><center>Don't Dump it, Donate it!</center>
</h1>
<p style="font-size:18px;">Habitat ReStore is a home improvement center that sells new and still
usable goods to the public at a fraction of retail cost. </p>
<p style="font-size:18px;">Your decision to donate to or shop at Habitat ReStore impacts the
Frederick community in a tremendous way. You not only become part of the solution to keep
resusable materials out of Frederick County landfills, but you also help local families in need
of affoardable housing as money raised at Habitat ReStore directly supports Habitat for Humanity
of Frederick County's mission to <em>bring people together to build homes, communities and
hope.</em></p>
</div>
<div id="d3"><a href="http://www.diggerslist.com/frederickrestore"
class="diggerslist-listingsbox" data-height="580" data-title="Just In at ReStore!!"
data-width="560"></a><script type="text/javascript"
src="http://www.diggerslist.com/js/widgets.js"></script></div>
</div>
<div class="content">
<div id="d2"><iframe
src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Habitat-for-
Humanity-of-Frederick-Co-ReStore/285362990195&width=407&height=497&colorscheme=light
&show_faces=true&border_color&stream=true&header=true&appId=306388216066339"
scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:407px; height:497px;"
allowTransparency="true"></iframe></div>
<div id="d4">
<h3 align="center">Have questions about donating? Email us!</h3>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><iframe width="400" height="370" frameborder="0"
src="http://www.foxyform.com/form.php?id=209311&sec_hash=0ae9442063e"></iframe></td></tr><tr><td
align="center"></td></tr></table>
</p>
</div>
</div>
</div>
</body>
</html>
The problem with absolute positioning is that it ties you into little islands of content that do not interact with anything else on the page. If for example in your box #d1 you wanted to add some more text then not only would you need to make #d1 bigger you would also have to move #d3 down the page to accommodate and so on for any other absolute elements below. If you reduced the header height for example then you have to change all the other elements on the page to match.
Just adding a new element is a nightmare because you have to work out the co-ordinates to place it rather than just placing it next in the flow without having to do very much at all. It’s just an impossible structure to manage in any but the simplest of layouts.
You say the layout scales but it doesn’t scale at all. If I resize the text the text spills out of the container and is unreadable and unusable due to the fixed heights you have set. You would need to add yet another scrollbar to the content to make it usable.
Fixed height boxes are not really workable on the web and should be avoided.
You should float all those elements instead inside two floated columns and not apply any heights but let the content dictate the height. You could apply an initial min-height to even the heights out if you wish but its best not to impose that limitation on them if at all possible. Then if you wanted to change anything the whole layout adjusts accordingly without needing to move anything out of the way.
I haven’t got time to recode the page today so maybe someone else with a little more spare time will give you a hand
I can give a quick fix for the centering and you would need to wrap an #outer wrapper around those 4 divs and give it a width and a position:relative to allow the nested absolute elements to be placed from #outer rather than the viewport. You would then need to remove the 120px margin offset from the two left divs and then reduce the two right divs by 120px they need to be flush to the wrapper and not 120px away from it.
However you would be better starting again width the wrapper holding all the page content and then creating two floated columns to hold the left and riught content as required. Avoid using deprecated and presentational tags like center and align as that is CSS’s job. Also avoid inline styles as they should seldom be used.
Your h1 should probably be your logo and site name using suitable image replacement. The address isn’t an h2 and I would probably rather use the address tag (although it wasn’t really meant for that originally). Latsly try and use meaningful class/id names rather #d1,#d2,#d3 etc otherwise you end up with #div134 and you have no idea where or what it is.
RyanReese, thank you! that looks great but I’m afraid when I minimize the browser the divs stack upon each other, to avoid that is why I choose to use absolute positioning. I’ve been trying to mess around with it but I’m afraid I have no luck preventing the stacking that occurs.
So I guess my next question would be how do I float without having my elements shift around?
The divs stack because I put a percent width on the wrapper. If you add this code it’ll not stack
#wrapper{min-width:998px}
However that will make it really bad for screens that aren’t that big. You should ideally set percentage widths for the content and sidebar (min-width them if you need) and then set a min-width on the wrapper equal to the min-widths of both the sidebar and content (say the sidebar has a min-width of 300px and the content a min-width of 400…give 700px min-width to wrapper)
How is this code looking? I referring to both responses and also Creating Websites: The missing Manual to create a wrapper and then two panels placing two divs in each.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
<body>
<div id=“outer”>
<div class=“leftpanel”>
<div id=“d1”>
<h1 style=“font-size:45px;font-family:‘Minion Pro SmBd’, ‘Minion Pro Med’, ‘Minion Pro’;color:#0C3;”><center>Don’t Dump it, Donate it!</center>
</h1>
<p style=“font-size:18px;”>Habitat ReStore is a home improvement center that sells new and still usable goods to the public at a fraction of retail cost. </p>
<p style=“font-size:18px;”>Your decision to donate to or shop at Habitat ReStore impacts the Frederick community in a tremendous way. You not only become part of the solution to keep resusable materials out of Frederick County landfills, but you also help local families in need of affoardable housing as money raised at Habitat ReStore directly supports Habitat for Humanity of Frederick County’s mission to <em>bring people together to build homes, communities and hope.</em></p>
</div>
<div id=“d3”><a href=“http://www.diggerslist.com/frederickrestore” class=“diggerslist-listingsbox” data-height=“580” data-title=“Just In at ReStore!!” data-width=“560”></a><script type=“text/javascript” src=“http://www.diggerslist.com/js/widgets.js”></script></div></div>
I would still float the columns as I said above like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
body { background-image:url(ReStoreMain.jpg); }
#outer {
width:1004px;
margin:auto;
position:relative;
overflow:hidden;
}
#d1 {
width:560px;
min-height:370px;
background-color: #FFF;
border: 2px solid #74C9E4;
}
#d2 {
width:410px;
min-height:505px;
background-color:#FFF;
border: 2px solid #74C9E4;
}
#d3 {
width:560px;
min-height:565px;
background-color:#FFF;
border: 2px solid #74C9E4;
margin-top:5px;
}
#d4 {
width:410px;
min-height:430px;
background-color:#FFF;
margin-top:5px;
border: 2px solid #74C9E4;
}
.leftpanel {
width:564px;
float:left;
}
.rightpanel {
float:right;
width:414px;
}
#d1 h1 {
font-size:45px;
font-family:'Minion Pro SmBd', 'Minion Pro Med', 'Minion Pro', sans-serif;
color:#0C3;
margin:15px 0;
text-align:center;
}
#d1 p {
margin:15px;
font-size:120%;
}
#d4 td { textx-align:center }
#d4 h3 { text-align:center; }
</style>
</head>
<body>
<div id="outer">
<div class="leftpanel">
<div id="d1">
<h1>Don't Dump it, Donate it!</h1>
<p>Habitat ReStore is a home improvement center that sells new and still usable goods to the public at a fraction of retail cost. </p>
<p>Your decision to donate to or shop at Habitat ReStore impacts the Frederick community in a tremendous way. You not only become part of the solution to keep resusable materials out of Frederick County landfills, but you also help local families in need of affoardable housing as money raised at Habitat ReStore directly supports Habitat for Humanity of Frederick County's mission to <em>bring people together to build homes, communities and hope.</em></p>
</div>
<div id="d3"><a href="http://www.diggerslist.com/frederickrestore" class="diggerslist-listingsbox" data-height="560" data-title="Just In at ReStore!!" data-width="560"></a><script type="text/javascript" src="http://www.diggerslist.com/js/widgets.js"></script></div>
</div>
<div class="rightpanel">
<div id="d2">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Habitat-for-Humanity-of-Frederick-Co-ReStore/285362990195&width=407&height=497&colorscheme=light&show_faces=true&border_color&stream=true&header=true&appId=306388216066339" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:407px; height:497px;" allowTransparency="true"></iframe>
</div>
<div id="d4">
<h3>Have questions about donating? Email us!</h3>
<iframe width="400" height="370" frameborder="0" src="http://www.foxyform.com/form.php?id=209311&sec_hash=0ae9442063e"></iframe>
</div>
</div>
</div>
</body>
</html>
The structure still needs sorting out as you shouldbn’t go straight form an h1 to an h3 and I would rename those id/classes elements more appropriately.
Why did you go back to the position:absolute way of doing things? The code I provided has the nice layout structure and with my advice on how to prevent stacking, it should have fit all your needs :).
Creating Websites:The Missing Manual suggested position:absolute for panels. Whenever I float on my own the .rightpanel always ends up below the .leftpanel and when then with your code the column stack on each other when the broswer is adjusted, even when I tried to adjust the percentages and ad min-widths.
Sorry I’m so complicated, I’m using Dreamweaver and I’m fairly new to web design, I’ve been reading several books and doing tutorials but positioning is obviously hard for me to grasp.
your code works great, I notice that you added a min-height, maybe I misunderstood and was trying to adjust the mid-width and that’s why the divs were stacking when the browser was adjusted. thank you for your patience and help!
Sounds like you have a terrible book then, sorry :).
Whenever I float on my own the .rightpanel always ends up below the .leftpanel and when then with your code the column stack on each other when the broswer is adjusted, even when I tried to adjust the percentages and ad min-widths.
Not in my example. If you ensure, despite any resolution, that there is enough width for both columns, it won’t drop. As in my code.
). Any suggestions on how(and also why) I could change the absolute positioning? Thanks!
