|
CSS - Impossible To Use Clear In 2-col Layout?
Hi again ,
I've got one more question: when you've used a 2 or 3-col layout for your webpage (the right, possibly the middle col holds the actual content, the others are floating divs used as menus), you can no more use the clear property for the actual content? Because it clears the space until all floating elements ends - including menus , so it finally looks like here. Here are CSS used for this page: CSS_1 (used for the fotogallery only) and CSS_2 (used mainly for layout of the web). I think there is a solution, I've already thought it can be found on BonRouge's pages (very useful pages by the way), but he made the menu using absolute positioning . So has anyone any idea how to solve this? And maybe one more detail: can be pictures in this fotogallery centered in their parent <div> (red bordered)? They're all floating, so it's not so easy, if possible. Oh man, rebuild these pages without tables, it really drives me mad... Similar Tutorialshttp://www.hostnet.nl/bestelmodule/...er_gegevens.php can something like this be done with or without CSS? and without everything beeing a fixed width i think its not possible but im having very much trouble with that idea so thats why i ask for your opinion I want my page to have 3 columns spread over 100% of the page. the 2 outer columns are just for backgroundcolors (they should differ) and the center one is the actual content of the page. Everything should be 100% height en the center div also contains 2 divs besides eachother! like this: http:/ /www.benkhard nl/sites/divs/divs.jpg just go to index.html for the page/css view. I can't seem to get it right, any help? Thanks! my site is totally based on tables. there is one huge table, which outlines the area for the header, left panel menus, right panel boxes, and the footer. inside those, the header is another table, the left panels are another table, each panel being a new row, the right panel boxes are the same thing, and the footer is a table just like the header. that is what every page is like. where on earth do i start? here is what i'm thinking so far, but i need confirmation because i have never done this befo header is just a regular div left panel menus are a div that floats left right content panels is a div that floats right footer is just a regular div will that work? can any1 specify if i need any other css that the float to make this work? I have a pretty typical three column layout with col1 floating left, col2 in the middle and col3 floating right. The HTML calls the divs in order of col1,col3,col2 and everything generally works fine with the exception of using a div in the middle column (col2) with a style that has clear:both in it. The clear:both clears all items in the sidebar columns and not just in the middle column (which is what I want). The problem can be seen at the below URLs. wwwDOTjessiekpowellDOTcom/2009/08/kristin-cavallari-filming-on-malibu-beach-for-the-hills/ and wwwDOTjessiekpowellDOTcom/2009/10/alessandra-ambrosio-bikini-photo-shoot/ As you will see the second set of images from the gallery is displayed after a huge gap of white space after it has cleared the last div in the right sidebar. What I want is to just clear the first row of images in the middle column. This does not just affect images but anything with a div style=clear:both Any suggestions will be appreciated as I've exhausted my skills on this one. Hi, Creating a Wordpress theme. I need help to clear:left JPG thumbnails in my 2nd-column div, but WITHOUT clearing the 1st-column div that is floated:left. In other words, I want these two columns to work independently, just like <TD> in html. Here is my setup -- it is a 2-column layout, with the left column being a navigational sidebar (navigation content automatically generated by wordpress), and the Right Column is the "real content" div. Wordpress generates the content in the right column, also. And since Wordpress generates the content based upon what the reader selects, I cannot assign any HEIGHT attributes to the Divs, because I do not know whether the selections have a lot of content, or very little. ----------------- HEADER DIV------------------------------------------ -- Sidebar Div-- __________ --- RIGHT DIV (not floated) ----------------- FOOTER DIV ---------------------------------------- (property of footer is set to clear:both) SIDEBAR DIV is float:left; width 160px RIGHT DIV is not floated, and contains all the content. 600px; Problem I need to solve: In column #2 -- the right div, I want to float-left small thumbnail jpgs, and write text flowing along the right side of the thumbnail. If the text does not naturally drop below the jpg, I want to clear:left to drop down to a new line and start the process over (new thumbnail, new text beside it). *** The problem is that when I clear:left on the jpg, it NOT ONLY clears the JPG, but also clears:left on the whole Sidebar DIV, thereby dropping the next line WAY DOWN on the page. So it looks like this: ___ HEADER ____ Sidebar __________________ Thumbnail #1: Text text text (clear:left clears everything....) __________________________ Thumbnail #2: Text ---- FOOTER --- Attempted solution: If I set the sidebar div to position:absolute, it works ok EXCEPT (and big except) that if there is not much content in the RIGHT DIV, then the FOOTER DIV is not low enough on the page, thereby overlapping the Sidebar Div. Obviously, this whole design could be EASILY accomplished with TABLES, but those are blasphemy these days, so I would like a more "modern" solution. I have googled this all day, and have not seen a solution. Help is appreciated. Hi all, I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings. I've found 2 good solution: 1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu. 2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading. Similar problem is being solved in this thread, but I didn't found there anything working . Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css. I am stuck using a tool in asp by now choice of my own. I am also stuck with a layout that is impossible with the tool, I think. The tool generates a table like so: Row 1 Row 2 Row 3 Row 4 The html looks like: <table> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> </table> I would love to find a way in css to get this to layout like Row 1 Row 2 Row 3 Row 4 Or Even better would be Row 1 Row 2 Row 3 Row 4 I tried everything I could think of to get this to happen. I read the specifications and I was under the impression that if you run position on a table row it turns into a block box. Any help? Hi, Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea??? Cheers, I'm trying to get a container div to stretch to the size of it's contents. Note, #navigation and #title will be for aesthetics only and aren't being used yet. Am I wrong in thinking that the clear has to go in the containing div, not the component divs? Anyway, I've tried both and neither works. I have: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>My Blog</title>
</head>
<body>
<div id="title">
<!-- title -->
</div>
<div id="navigation">
<!-- search -->
<!-- jumpbox -->
<!-- subscription_and_rss_images -->
</div>
<div style="border:3px solid red; clear:both">
<div class="leftcolumn" style="border:3px solid green;">
<!-- menu --> <!-- leave this tag in for menu in Admin CP -->
<!-- referrers -->
<!-- photo -->
<!-- calendar -->
<!-- baby -->
</div>
<div class="rightcolumn" style="border:3px solid blue;">
<!-- content -->
</div>
</div>
<div style="border:3px solid yellow;">
<!-- credit -->
</div>
</body>
</html>
And CSS: Code: div.leftcolumn{
float: left;
width: 200px;
}
div.rightcolumn{
position: relative;
margin-left: 205px;
padding-left: 5px;
border-left: 1px solid #222222;
}
This produces: I have a site with a bunch of floats. It looks something like this: [HTML]<div id="nav" style="float: left"> </div> <div id="content"> <div style="float: left"> </div> <div style="float: right"> </div> <br style="clear: both" </div>[/HTML] Now that clear:both also clears #nav instead of the two divs in #content. Is there any way to fix this so it doesn't clear #nav? Can someone explain to my why my "spacer" div is not working (i'm looking in IE7 & Firefox)? Here's the page (I put a 1p border around the "clear" div so that you can see it for testing): http://www.welcome-home-interiors.net/services.php Below is the HTML and CSS... HTML: Code: <body>
<div id="container">
<div id="header">
<?php include('includes/flashHeader.php'); ?>
</div>
<div id="nav">
<?php include('includes/navbar.php'); ?>
</div>
<div id="maincontent">
<div id="mainLeftText">
<p><img src="images/headers/services.gif" alt="SERVICES" width="188" height="49" /></p>
<div id="mainLeft">
<p><span class="header">INTERIOR DESIGN</span><br />
Whether it's simply choosing a paint color or extensively remodeling a kitchen, Welcome Home Interiors can offer you guidance. Space planning and 3D Images are available so that you can visualize your room and make changes before any labor or purchasing is made.</p>
<p><span class="header">REAL ESTATE STAGING</span><br />
"Set the Stage" by rearranging current furnishings and accessories to create your own "model home" - spacious, fresh, and beautiful - exactly what buyers are looking for! As trained professionals, Welcome Home Interiors will assist you in establishing a perfect first impression - an important factor in selling your home for the highest price and in the shortest amount of time. In a 1 to 2 hour consultation we will offer suggestions to enhance your home easily and economically, and leave you the comprehensive list of tasks we've discussed. If you'd prefer, you can enjoy the instant gratification of having us rearrange your space on the spot. We also can add pieces from our inventory to enhance your belongings or even fill your vacant home.</p>
<p><span class="header">ROOM REDESIGN</span><br />
Welcome Home Interiors can give your room a whole new look using the furniture and accessories currently in your home. Want to add a few fresh pieces? Let us provide you with a design plan tailored to meet your lifestyle. We can roll up our sleeves and complete the look for you, or turn over the plan for the "do-it-yourselfers".</p>
<p><span class="header">SHOPPING</span><br />
Do you get overwhelmed by all the options? Or just don't have time to shop? Let's discuss the look you're dreaming of and establish a budget, then Welcome Home Interiors will locate it and bring it to you.</p>
<p><span class="header">YOUR NEW PLACE</span><br />
Welcome Home Interiors will recycle your existing furnishings into your new home. We will offer answers to all of those design questions about paint, window treatments, and finishing touches so you'll soon have the "at home" feeling in your new surroundings.</p>
<p><span class="header">GIFT CERTIFICATES</span><br />
Welcome Home Interiors GIFT CERTIFICATES make wonderful hostess, house warming, wedding, birthday, and special occasion gifts. They can be customized to your needs.</p>
<p><span class="header">FEES</span><br />
Together, Lori and Teri of Welcome Home Interiors are $75.oo an hour for design consulting. Prop rental for real estate staging is quoted per room.</p>
</div>
</div>
<div id="mainRight">
<p><img src="images/indexPic.jpg" alt="Welcome Home Interiors" width="310" height="415" /></p>
</div>
<div class="spacer"> </div>
</div>
</div>
</body>
CSS: Code: html, body {
background: #DACCCC;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0;
color: #6E6E53;
height: 100%;
line-height: 1.5em;
}
a:link, a:visited, a:active {
text-decoration: underline;
color: #6E5256;
}
a:hover {
text-decoration: none;
color: #7F0A32;
}
#container {
background: #000;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
height: 100%;
}
#header {
background-color: #FFF;
width: 100%;
height: 272px;
margin: 0px;
padding: 0px;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav {
width: 100%;
height: 32px;
background: url(../images/nav/navLeftFade.jpg) #7F0A32 top left no-repeat;
margin: 0px;
padding: 0px;
text-align: left;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav img {
margin: 0px;
padding: 0px;
width: 126px;
height: 32px;
vertical-align: top;
}
#maincontent {
background-color: #CAD49F;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
overflow: visible;
}
#mainLeftText {
width: 350px;
float: left;
padding: 20px 0px 0px 10px;
margin: 0;
overflow: hidden;
}
#mainLeft {
width: 320px;
padding: 0px 0px 0px 30px;
margin: 0;
float:left;
}
#mainRight {
width: 350px;
float: right;
padding: 50px 5px 0px 0px;
margin: 0px;
overflow: hidden;
}
.header {
font-weight: bold;
text-align: left;
text-decoration: underline;
margin-bottom: 0px;
padding-bottom: 0px;
}
.spacer {
clear: both;
border: 1px solid;
}
/* NAVIGATION ROLLOVERS */
a#home:link, a#home:visited, a#home:active {
margin-left: 150px;
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/home.gif);
}
a#home:hover {
margin-left: 150px;
background-position: -126px 0px;
}
a#services:link, a#services:visited, a#services:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/services.gif);
}
a#services:hover {
background-position: -126px 0px;
}
a#gallery:link, a#gallery:visited, a#gallery:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/gallery.gif);
}
a#gallery:hover {
background-position: -126px 0px;
}
a#testimonials:link, a#testimonials:visited, a#testimonials:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/testimonials.gif);
}
a#testimonials:hover {
background-position: -126px 0px;
}
a#contact:link, a#contact:visited, a#contact:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/contact.gif);
}
a#contact:hover {
background-position: -126px 0px;
}
Thanks!... I'm using float:left for my left nav bar, and then clear:both for my footer. Trouble is, I need to use some content boxes that will be using floats and then clears, however, when I use clear:both in my content box, it clears EVERYTHING (meaning it pushes below my navbar, because the navbar is quite long). Is there a workaround or am I using floats/clear wrong? TIA Javashackgirl Hello, Consider the following design: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> </div> And the CSS classes: .A {float:left; clear:left} .B {float:left; clear:right} This does not work well. So I always do as follow: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> <div id="clear" class="clear"></div> </div> Whe .A {clear:both} This always happens when I have divs inside other divs. Does anyone knows how to solve this? Thanks, Miguel I've got a div that incorporates some inline styling. Looks fine on a blank page, but when I insert it into a more complex page it inherits all the styling of the stylesheets. Is there anyway to I can have this div ignore all inherited styling and just format itself according to browser defaults and its own inline styling? Hello, The divs numbered #4(extra2) and #5(navigation2) cannot give way to other divs . How can I clear the other divs? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Template 8</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color:#981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#navigation2{background:#CC33FF}
div#extra{background:#FF8539}
div#extra2{background:#996633}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#navigation2{float:left;width:150px;margin:170px 0 0 -150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#extra2{float:left;width:150px;margin:170px 0 0 -700px}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>website name</h1>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very column long make </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long fillercolumn fill fill very silly column silly silly fill fill long filler column fill fill very silly column silly silly fill fill long filler column fill fill very silly column silly silly fill fill long filler </p>
</div>
<div id="navigation2">
<p><strong>5) Cannot clear above div (id=Navigation).</strong> cannot clear above div, this div should be below the div NAVIGATION</p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> column long make silly silly filler silly very very very long column filler fill make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very </p>
</div>
<div id="extra2">
<p><strong>4) Cannot clear above div (id=EXTRA).</strong> cannot clear above div, this div should be below the div EXTRA </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I searched google to see if there was a fix for this problem, and found a few hits, however, the solutions were not solutions. I tried them, yes the backgrounds of my clear .png's were still being filled with some random color. Is there anyone than can tell me how to make a .png's background clear in internet explorer? Hi, Im not sure whats going wrong with this, but I have two DIV elements on the page: 1st div "googleMap" CSS for googleMap: #googleMap { height: 300px; width: 500px; float: left; } 2nd div "page_right" CSS for page_right: #page_right { width: 300px; clear: left; float: right; } Could someone please tell me why page_right DIV is not clearing the googleMap div? I've just about had enough so hope some kind person will no the answer!! Here is the live page (showing the flaw): belvoir-mortgages.co.uk/contact.php Thanks Lee I can't figure out how to clear the float for the columns with the text column 1 and 2. If the other columns dont have a lot of text then the footer defaults to just under the image so where that 1+2 start. Any ideas plase? Code: <div id="container">
<div id="home_col_1">
<img src="images/holder_slideshow.png" alt="" width="446" height="365" />
<div id="home_col_1_1">
column 1<br />
column 1<br />
column 1<br />
column 1<br />
column 1
</div>
<div id="home_col_1_2">
<p> column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
</div>
</div>
<div id="home_col_2">
<p>column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3</p>
</div>
<div id="home_quicksearch">
Search Box Here
</div>
<div id="home_col_3">
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
</div>
<div id="home_col_4">
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
</div>
<div class="clear_floats"></div>
</div>
Code: #container { width: 986px; margin:0 auto; }
#home_col_1 { width:446px; height:365px; float:left; }
#home_col_1_1 { width:207px; float:left; padding:0 10px 0 0; border-right:#CECECE 1px solid; margin-top:10px; }
#home_col_1_2 { width:207px; float:left; padding:0 10px 0 10px; border-right:#CECECE 1px solid; margin-top:10px; }
#home_col_2 { width:171px; float:left; padding:10px 10px 0 10px; border-right:#CECECE 1px solid; }
#home_col_3 { width:165px; float:left; padding:0 10px; border-right:#CECECE 1px solid; }
#home_col_4 { width:142px; float:left; padding:0 10px; }
#home_quicksearch { width:328px; padding:10px 10px 10px 0; float:left; border-bottom:#CECECE 1px solid; margin:0 0 10px 10px;
background-color:#FFFFFF; }
#footer { width: 966px; margin:0 auto; padding:10px; margin-top:10px; border-top:#CECECE 1px solid; }
|
|||||||