Search the Community
Showing results for tags 'wrapper'.
-
Hi, I have a wordpress blog, http://bupphawitt.com/, that I want to create extra sidebars outside the container, and on both sides of it. The sidebars have to be fixed, so that when I scroll down the page the sidebars remain fixed. Please see yahoo page for similar idea I want to create, http://www.yahoo.com/. Have a look at its left sidebar, which is how I want my site to be, just the extra boxes on both sides. I have tried to create a wrapper outside it, but unsuccessful. I must have done something wrong. Can someone please guide me to the right direction? Any help would be highly appreciated. Please find a drawing attached, so you can better see how it should look. Beforehand Thanks! My website is: http://bupphawitt.com/ Regards, Buppha Witt
-
Hello, I'm having difficulties trying to understand how the wrapper works, or I think the problem may also be caused by the float and/or clear attributes? In my example I have a wrapper which holds two boxes, when I type code in the boxes they expand automatically downwards but my wrapper remains static, it won't expand as I type in to the two boxes. Does it mean I have to explicitly set a height to the wrapper or is it something to do with the float and/or clear attributes? I set different colors to the two boxes and the wrapper just to see if the wrapper actually expands but it won't move. Thanks for your help. <!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><meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /><title>Here goes a title</title> <style type="text/css"> body, h1, html{margin:0;padding:0;}#wrapper{width:900px;background:#E9E9E9;margin:0 auto;background:#FFFF33;}#left-content-area{width:600px;float:left;background:#0066FF;}#right-content-area{width:300px;float:right;background:#CCCCCC;} </style> </head> <body> <div id="wrapper"> <div id="left-content-area"><h1>some text goes here</h1><p>some text goes heresome text goes hersome text goes hersome text goes hersome text goes hersome text goes hersome text goes her</p></div> <div id="right-content-area"><h1>some text goes here</h1><p>some text goes heresome text goes hersome text goes hersome ttext goes heresome text goes hersome text goes hersome tetext goes heresome text goes hersome text goes hersome teext goes hersome text goes hersome text goes hersome text goes her</p></div> </div><!-- end of wrapper --> </body></html>
-
Hello, The code below is quite simple but there are things I still don't fully understand. 1. When I place code inside the center container the wrapper expands automatically, but it won't happen when I do the same in the left or right container. Why's that? do I need to explicitly set the height of the wrapper? 2. When I reduce the resolution to the minimum I see that the link in the center container falls on a second line. Is there any way to avoid that? Thanks. [/font][/color][color=#000000][size=3]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/size][/color][/font][/color]<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title> <style type="text/css"> p, h1, h2{text-align:center;} #wrapper{width:900px;margin:0 auto;} #left{width:200px;float:left;} #right{width:200px;float:right;} #center{width:500px;margin:0 auto;background-color:#CCC;}</style> </head> <body> <div id="wrapper"> <div id="left"> <h2>Left column</h2> <p>Some text some text</p> </div> <div id="right"> <h2>Right column</h2> <p>Some text some text</p> </div> <div id="center"> <h1>Center column</h1> <p>Some text some text some textSome text some text some textSome textSome textSome textSome textSome textSome textSome textSome</p> <p><a href="http://www.google.com">Click hereClick hereClick hereClick hereClick hereClick hereClick hereClick</a></p> </div> </div></body>[color=#000000][size=3]</html>[/size][/color][color=#000000][font=verdana, geneva, lucida,]