Issue
As far as I know clearing floats mostly works on parent items. But there is one issue in my template after the post thumbnail, where the clear: both acts on the whole content wrapper. Without clearing the float, the thin line will stick to the text right to the thumbnail.
What I want to do is to have the line 45px below either the thumbnail or the text (depending on what height is higher).
Preview
Please have a look at this sample.
Any help would be highly appreciated!
Just use the overflow: hidden; hack to end floats.
Add the CSS overflow: hidden to the parent element.
EDIT
As a bonus. If you want to use some fancy CSS3 stuff (like dropshadows) the above hack will fail.
There is a new hack: http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
Although this hack also has some issues.
And it would take some time before you can make some serious use of fancy CSS3 stuff.
You could use it, but the browser support will be poor for a long time :)
I would recommend using a .clear class that could be used anywhere to clear floats, it would look like this:
.clear { height:0; overflow:hidden; clear:both; }
Insert it under your floated elements to clear them, it
Float the thumbnail div left and the text div left as well. after them, set a div
<div style="clear:both"><!-- --></div>
The div that contains all 3 of these will take the length of the heighest div.
Basically:
<div class="container">
<div class="thumbnail" style="float:left; width: 50%;"><img src="whatever.png" /></div>
<div class="text" style="float:left; width: 50%">My text</div>
<div style="clear:both;"><!-- --></div>
</div>
Related
maybe this is a stupid question but I have a doubt about CSS clear propery use.
I have this template: http://onofri.org/example/WebTemplate/
Why if I delete (you can try with firebug) the propery clear: both from the #footcontainer div I obtain that this div is placed at the top (it seems almost below the header and below the two columns)
My idea is this thing happens because the two columns #content and #sidebar are floated to the left and without setting clear: both on the #footcontainer div the browser try to put also this div on the right of the #content* div but have no space and put at the top.
Is this a right intuition or am I missing something?
Tnx
Andrea
This is happening because everytime you float an element, its container loses its auto height.
If you want to prevent that from happening, there are somethings you can do:
Set a given height to the container
Ex:
<div class="my-container" style="height: 100px">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
Be aware that if you have set a given height, the div won't resize as the content becomes higher than the container.
Append a div with style="clear: both" right after the floated elements
Ex:
<div class="my-container">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
<div style="clear:both"></div>
</div>
Yeah, it works. But only noobs do it like that. It's not elegant and pollutes your code.
Set overflow: hidden to the parent container
<div class="my-container" style="overflow: hidden">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
This one is great, but you are in danger if you have someting positioned absolutely and have to move it outside the parent div, for example. You'll have an unpleasant surprise.
Use the ClearFix Hack.
This is the way I do it: easy to implement and works like a charm. Check this link out: http://www.positioniseverything.net/easyclearing.html;
If you mind about not having valid CSS (like me), you can target IE browsers with a different stylesheet and conditional comments, for example.
Further resources about the subject:
Quirks Mode Site: CSS Clearing
http://www.quirksmode.org/css/clearing.html
Chris Coyier's ClearFix Tutorial
http://css-tricks.com/snippets/css/clear-fix/
I see you code
your code is too complicated according to me but any way you can used to this css than your problem is solve
Used to this css
#c{position:relative;}
#c:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: -42px;
background: url('http://onofri.org/example/WebTemplate/images/footerRight.jpg') no-repeat -3px 0px;
height: 43px;
}
#footerRight{display:none;}
You have no height set on your container. If you change the height of container to the height of its' contents, which in this case is 596 px then when you take away the clear both property on the footer it won't move one iota.
I think it's because if you float an object, the parent object doesn't resize accordingly.
For example, if you had:
<div class="1px-border">
<div class="float">
<h3>TEST</h3>
</div>
</div>
The border would be completely flat, and not resize to the header. You could fix it by having overflow: auto in the container div.
That said, I could be massively wrong.
I want to know if its possible to made appear the main content to the left and the header to the right BUT the HTML is like that
<div id="header" style="float:right; height:1000px; width:60%;">
head
</div>
<div id='main' style ="float:left; height:1000px; width: 40%;">
main
</div>
I already try that but it doesnt work
By the way, the header absolutely needs to be first.
Thank you
jsfiddle everything is working as you needed. But I would add after these blocks blank div with style clear to further avoid problems with the following blocks.
Or may be you want this? jsfiddle
Basically what I have is an HTML page with a "main content" block, if you will. All main content for that page goes in the div I have for it. What I want is to have a column with more stuff to the right of it, but whatever I try to do it always ends up going either below it or in some random place. Here is the code for my page, if anyone could help guide me through it that would be awesome.
HTML: http://pastebin.com/Hh2TNGdj
CSS: http://pastebin.com/ZCEJkFmH
Thanks.
You were probably close... putting in your new div straight after #pagecontent, and floating it right, then floating the #pagecontent div left, will allow them to sit side by side.
Note that the next content (footer, for instance) will need to be cleared properly so it won't overlap your floated divs.
I would switch to using HTML5 tags, personally. If I were to do something like this, I would go with code along this line (untested):
<div id="wrapper"> #wrap both sections in a container
<section id="left">Left Section</section>
<section id="right">Right Section</section>
</div>
For the CSS, you can do something like this:
#wrapper {
width: 1000px;
height: auto;
}
#left {
width: 500px;
height: auto;
float: left;
}
#right {
width: 500px;
height: auto;
float: left;
}
Some important things to remember. If you add padding, subtract that from the width (if padding is on both left and right, subtract padding x2). On your footer, put clear: both.
Hope this helps you out.
Here's a fiddle: http://jsfiddle.net/n6D7U/
new div #aside,
both columns are floating with fixed width (700+20+240 pixels here),
last CSS rule is there because parent has only floating children and thus no more content in the flow to push down the background...
I think this should work:
<div style="padding:20px;">
<div id="pagecontent">
<span class="main-content-font">
The title of this page goes in the gray box above. This is the homepage, you can put <u>anything</u> here (the main content of your website
which has some neat features and explains what your site is about should go here)!<br />
<br>
Content, content, and more content!<br />
<br>
Try to make it fill up as much space as possible, making the page longer. Don't fill it with useless junk, just anything
you can think of that will benefit the page.
</span>
<span class="whatever">
some things
</span>
</div>
</div>
I haven't tried it, but making main-content-font a span will not add a newline, so the whatever span will be placed to its right.
This jsfiddle example shows what I'm talking about, I gave the div in question a red border to show how it's displayed.
I'd expect the #searchwrapper_3 div to go inside the #col_st_cautare one, but for some reason that's not how it works. I've been staring at it for a while now and I got no idea why it's showing like that
I also have an example of it looking ok simply because i've added another element after the #searchwrapper div here.
Issue's fixed, TIL a div will collapse if it contains only floating elements.
You need to do a clear:both; - see the end of http://jsfiddle.net/wzYry/3/
<div style="border: 1px solid red;" id="col_st_cautare">
<div style="float: left;" id="searchwrapper_3">
.... code ....
</div>
<div style="clear:both;"></div>
</div>
On a side note, it may be easier to make clr class in your styles.
.clr{clear:both;}
This way you can use this anytime you need to clear
<div class='clr'></div>
If a div contains only floating elements, it height will collapse.
You can add a <div style="clear:both;"> or use some techniques from this article, for example overflow:hidden:
<div style="border: 1px solid red;overflow:hidden" id="col_st_cautare">
This is happening because the child elements inside are floated and parent lost track of the how to wrap them.
Probably the easiest fix for this
#col_st_cautare { overflow: hidden; }
Demo
Other than this, the stable solution would be to add <div style="clear:both;"></div> before the closing the element.
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.