SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning and wrapper/container divs

    Hi there,

    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!
    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%;
    }
    
    #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 /> 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 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&amp;width=407&amp;height=497&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;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>
    Restorelandinghtml.jpg
    Last edited by Paul O'B; Mar 27, 2012 at 09:23. Reason: code tags added

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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..
    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&amp;width=407&amp;height=497&amp;colorscheme=light
    
    &amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;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>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

    Code:
    #outer{
    	width:1004px;
    	margin:auto;
    	position:relative;	
    }
    #d1 {
    	width:560px;
    	height:370px;
    	background-color: #FFF;
    	border: 2px solid #74C9E4;
    	margin-top:175px;
    	padding:5px;
    	position:absolute;
    }
    div#d2 {
    	width:410px;
    	height:505px;
    	background-color:#FFF;
    	border: 2px solid #74C9E4;
    	margin-top:175px;
    	margin-left:580px;
    	padding:5px;
    	position:absolute;
    }
    div#d3 {
    	width:560px;
    	height:565px;
    	background-color:#FFF;
    	border: 2px solid #74C9E4;
    	margin-top:565px;
    	padding:5px;
    	position:absolute;
    }
    div#d4 {
    	width:410px;
    	height:430px;
    	background-color:#FFF;
    	border: 2px solid #74C9E4;
    	margin-top:700px;
    	margin-left:580px;
    	padding:5px;
    	position:absolute;
    }
    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.

  4. #4
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The divs stack because I put a percent width on the wrapper. If you add this code it'll not stack
    Code:
    #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)

    That'll help you keep a fluid layout .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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"

    "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;
    }
    #d1 {
    width:560px;
    height:370px;
    background-color: #FFF;
    border: 2px solid #74C9E4;
    }
    #d2 {
    width:410px;
    height:505px;
    background-color:#FFF;
    border: 2px solid #74C9E4;
    }
    #d3 {
    width:560px;
    height:565px;
    background-color:#FFF;
    border: 2px solid #74C9E4;
    margin-top:5px;
    }
    #d4 {
    width:410px;
    height:430px;
    background-color:#FFF;
    margin-top:5px;
    border: 2px solid #74C9E4;
    }

    .lefpanel {
    position:absolute;
    top:100px;
    left: 40px;
    width:500px;
    height:600px;
    }
    .rightpanel{
    position:absolute;
    top:0px;
    right:-71px;
    width:475px;
    height:600px;
    }
    </style>
    </head>

    <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>

    <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&amp;width=407&amp;height=497&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;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>
    </div>
    </div>
    </div>
    </body>
    </html>

    I hope I'm not completely off again!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I would still float the columns as I said above like this:

    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); }
    #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&amp;width=407&amp;height=497&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;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.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cboice8127 View Post
    Creating Websites:The Missing Manual suggested position:absolute for panels.
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •