I keep finding that if I have nested divs inside each other, and one of the inner ones is floated, the outer one won't expand around it.
Example:
<div style='background-color:red; '>
asdfasdf
<div style='float:left; background-color:blue; width:400px; height:400px;'>
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
</div>
asdfasdf
</div>
What do I need to do to the outer div to make it cover the inner one? IE: Put it's border/background color all the way around it?
Also, is there a general principle I am bumping up against here? If so, what should I look up to get a solid understanding of what it is?
Thanks!
Edit
Hi All,
Thanks for the answers, semantically correct and no, and for the links.
Though I will end up using overflow in the final work, I will leave Ant P's answer as accepted, as it was the first one that really worked, and got me out of a short term jam, even though it offends semantic sensibilities.
As a long-time html hack trying to move to decent css layouts, I can certainly understand, and sympathize with, using semantically incorrect hack that gets the job done, though I am sure he will change that habit after this =o)
You can do it strictly with CSS using overflow:hidden
<div style='background-color:red;overflow:hidden;'>
...
</div>
If you are the type that likes explanations (rather than just "do this") here are some excellent articles that explain several methods:
Simple Clearing of Floats
How to Clear Floats Without Structural Markup
Clearing Floats
it is simply staggering how many times this is the base problem for some of the CSS questions on SO. What is even more staggering is how many times someone gives an answer like Ant P's. While technically correct, it is completely semantically incorrect. Themis is absolutely right. Just add overflow:hidden to the parent of the floated divs. Sometimes to make it play nice with IE you may have to specify a width OR a height. That is really all there is to it.
If you just float the outer div, it will expand to contain the nested div. Combining floated and unfloated elements in the layout is usually troublesome.
I can't beat the answers that have been posted, but I do have a good tip for helping to diagnose layout problems without screwing up your markup.
Add this section to the bottom of your CSS file and keep it commented out when you don't need it:
div
{
border-width: thin !important;
border-color: Orange !important;
border-style: solid !important;
}
label, span, /* whatever else you might want to see */
{
border-width: thin !important;
border-color: Blue !important;
border-style: solid !important;
}
Often I'll find that a layout that actually works (particularly one that uses the "add a <br> with a clear: both style) will actually not be nesting <div>'s properly but someone has tweaked the CSS so that it works by voodoo. Actually looking at the borders of your elements helps a lot and doing this in CSS means you don't have to touch your real markup or your main CSS in order to turn the borders on for debugging.
This article about CSS systems is definitely worth a read. As Darko Z said it is staggering to see the semantically incorrect answer given by Ant P.
Related
I am trying to create an accordion menu with multiple floated elements. I want all of the inactive menu items to collapse to a small fixed width (40px or so) and the active item to expand to the remaining width. I want the menu to be responsive/elastic, so only the inactive menu items will have fixed widths.
Below is an example of what I want my menu to look/function like (without using jQuery to set the widths)...
Accordionza - CodeCanyon.com
I was able to accomplish the desired effect when only two menu items are displayed by floating one of the elements and giving it a fixed width, while NOT floating the elastic item and giving it a width of 100%.
Two Columns (Works)
<style type="text/css">
#one {
float:left;
width:40px;
}
#two {
width:100%;
}
</style>
<div class="row">
<div class="col" id="one">One</div>
<div class="col elastic" id="two">Two</div>
</div>
Four Columns - Elastic In Between (Does Not Work)
<style type="text/css">
#one, #three, #four {
float:left;
width:40px;
}
#two {
width:100%;
}
</style>
<div class="row">
<div class="col" id="one">One</div>
<div class="col elastic" id="two">Two</div>
<div class="col" id="three">Three</div>
<div class="col" id="four">Four</div>
</div>
Please note: applying float:right; to the elements to the right of the elastic item did not work either...
The problem is that if the elastic element is NOT on the end of the row, then the menu items do not remain on a single row. Please examine the fiddle below to see what I mean...
jsfiddle
So how do I apply this desired elasticity to the elements that reside in between their siblings? I really really want to keep the markup as simple as possible. Thanks in advance!
Update: I am getting close to a solution, however there is a slight problem with every method I've attempted. I will break them down, along with the issues I'm running into with each one.
METHOD 1: display: table-cell; (Suggested by onetrickpony)
Seemed like the answer, however there will not always be contents (text or html) inside the slide elements, and elements formatted with the display: table-cell; property do not recognize applied widths unless there is content inside of them. So this only works if I have content inside the slide... (I could modify the markup of my slider, but I would like to keep it the way I have it).
METHOD 2: CSS calc() (Also suggested by onetrickpony)
Not supported by some of the browsers I would like it to be... CaniIUse.com Browser Support Chart for calc(). Another excellent possibilty! One I did not know existed, and could be utilized if I made a fallback JS script for older browsers (want to avoid).
METHOD 3: Flexbox (Also suggested by onetrickpony)
Probably my favorite solution, but limited support is making me timid. Also could be used along with a fallback script. I learned about this a while back, and this is the future of CSS and layouts. Our salvation! Can't wait for full support...
METHOD 4: jQuery (Suggested by Tomasz Golinski)
What I was originally going to use, but decided I wanted to see if there was a CSS method that could be used instead. I have had some issues when using jQuery to set the width of elements. Mainly when the container is resized, and the script calculates the appropriate width while the container is resized.
So, the kind people who responded to my question have provided me with viable solutions to this issue. Any of the below is certainly an acceptable method to do what I am asking. I am simply seeking an answer that is more of a common CSS method. I am hoping that it is possible to accomplish this with some combination of styles I have not tried. I will admit I think Tomasz is correct- it cannot be done. I am leaving this question open just in case someone has a solution for me. Both Tomasz and onetrickpony have given me great answers. But I am still seeking a CSS-only solution that is widely supported by older browsers- and new, that I do not need to include a secondary script for, and that works without the need for characters inside the elements. Just want to see someone prove us wrong (that it is possible with good old fashioned CSS). If this magic answer does not come, I will be marking onetrickpony's answer as the best solution due to the fact it is CSS based, and he provided multiple solutions that are clean and simple. A combination of his flexbox CSS and Tomasz jQuery (as the secondary script) will most likely be what I use. Thanks!
If you're set to use floats, calculate the width of your "elastic" column by subtracting the widths of other columns from 100%. Example:
<div class="row cols-4">
<div class="col" id="one">One</div>
<div class="col" id="two">Two</div>
<div class="col elastic" id="three">Three</div>
<div class="col" id="four">Four</div>
</div>
CSS:
.cols-4 .elastic{
width: calc(100% - 45px * 3);
}
/* add more rules for other possible variations here */
http://jsfiddle.net/QM4LZ/
But a cleaner and easier approach is to use flexible boxes. This is exactly what they were designed for.
.row{
display: flex;
}
.col{
flex: none; /* <- don't flex */
width: 45px;
}
.elastic{
flex: auto; /* <- flex */
width: 100%;
}
http://jsfiddle.net/F7sxU/
It's also possible to achieve this with tables (fiddle), but you'll most likely run into some limitations when adding the real content and you need more wrapper elements.
the previous answer does resolve the issue however there are some problems with #onetrickpony's solution
example #1 will not work properly with dynamic number of items.
example #2 in most browsers it will work but not all browsers do support flexible boxes.
here is simple javascript code
jsFiddle: http://jsfiddle.net/aQEt3/5/
var count = $('.row').children().length; // counts how many items are in the entire row
var totWidth = $('.row').width(); // checks total width of the row
var elWidth = totWidth - ((count - 1) * 45); // counts how wide should be the elastic it
$(document).ready(function () {
$('.elastic').css('width', elWidth); // when document is ready, apply the new width to the elastic
});
beware, this is very simple code and there will be some issues if:
*there are 2 or more .row items
*you have more than one elastic class
So I'm busy with my first webpage and after a while added an audio element that works perfectly,
The only problem I'm having is that I can't lower the element in that way that it is on the bottem of my page.
I tried:
Googling for a very long time,
asking other people with more knowledge then me,
(worked but make a mess) Use <br> alot of times
These are my HTML and CSS code, if you need more please ask ;)
Also i dont want to know more then that, im busy learning and the best way to do that is doing it yourself. only with this i got very stuck.
HTML
<audio src="music.mp3" controls>
<embed
src="music.mp3"
width="300"
height="90"
loop="true"
autostart="false" />
</audio>
CSS
audio {
top:1200px;
vertical-align: bottom;
}
BTW: also tried margin-bottom, but it didn't work
Just use margin-top to lower the element:
audio {
margin-top:50px;
Example:
http://jsfiddle.net/CTD58/
top:1200px; only works when you declare position:absolute, position:relative or position:fixed.
Either add one of these positions declarations, or add margin-top instead of top.
Alternatively, wrap the audio element in a div and position that div how you want.
I'm kind of stuck on what seems to be something trivial but I just can’t get my head round it.
Basically I have the address div and then the menu..... Which should go under the address div but it’s seems to be floating next to the address div.
Any help will be much appreciated.
Add a clear directive to your menu:
#contact-menu {
clear: both;
text-align:center;
padding-top:90px;
}
That tells the browser that there are no floating elements allowed on either side of the contact menu.
Add clear:both to #contact-menu.
Frankly, <br /> would probably do the trick. But if you're like me, you think that <br /> is for text only. #address{display: block;}#contact-menu{display: block;} should do the trick, as block elements force a line break before and after the element. Didn't bother editing the CSS; hope it helps.
I have two elements side-by-side. Element 2 is smaller than Element 1. Both elements do not have a fixed height. I need to vertically center Element 2. How do I achieve this using CSS?
Edited:
This is what I have so far:
<div id="container" style="width: 100%;">
<div id="img1" style="float: left;">
<img src="image1.jpg".../>
</div>
<div id="img2" style="float: right;">
<img src="image2.jpg".../>
</div>
</div>
img1's height will always be greater than img2's height. I want img2 to be aligned vertically-center. Hopefully this clarifies what I am trying to accomplish.
The most straightforward and clean way to do it is to use display: table and vertical-align. However, IIRC (it's been a while since I was up on browser compatibility issues) support for display: table and friends is absent from ... some common-then version of IE, perhaps? Anyway, adding other rules to make an adequate fallback if the display: table is ignored might be good.
<div id="container" style="display: table;">
<div id="div1" style="display: table-cell; vertical-align: middle;">
<img id="img1" src="image1.jpg" />
</div>
<div id="div2" style="display: table-cell; vertical-align: middle;">
<img id="img2" src="image2.jpg" />
</div>
</div>
(Of course the styles ought to be in a stylesheet; this is just matching your original example and not knowing the use case.)
The display values table, table-row, and table-cell basically perform exactly like HTML table, tr, and td, but you are permitted to omit any of them (as I do here, using table-cells directly within tables) and the layout engine will do the sensible thing.
Not easily. Some popular hacks include using display: table-cell and a parent using display: table (I don't remember if the valign="center" attribute is needed), or using absolute positioning with top: 45% or so (not precise, but OK for small elements).
To determine the best method, we need to know more about your layout. What are they centered within? Will/can there be a large Y-distance between elements 1 and 2? Does their parent have a fixed height? Do they both have the same parents, or is one a sibling of the other? What method are you using to place them side by side?
Keep in mind that many tricks require additional hacking to work in IE, and that using Javascript is just cheating and will make your site inaccessible/annoying to people with low vision (who may be using script-unaware screen readers), people with scripts disabled (esp. on mobile or command-line browsers that may not support them well if at all), search engines, etc. It's possible using only CSS (though you may have to add some container elements), but the exact method depends what exactly you're doing.
If you only need to support new browsers like Safari (e.g., building webapp for the iPhone), CSS3 offers an elegant approach with no floats or negative margins. All details here: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
I don't think you can do this reliably without a table. Kevin's solution would probably work, unless you need to support IE (which most of us do). And, in this case, the table markup might actually be smaller than the div-based markup.
Put them both inside another element, give it a min-width and set the left and right margins to auto.
I have a page that there is a list of "tags", just like here in SO, and when the mouse is over it, it gets darker.
It works great with Ie7, 8, FF, Chrome, Safari etc... but IE6 has a bug that when a:hover is triggered.
The bug is that the div that those (ul li a) are contained, gets a height's increase.
the css I have is:
div.options ul.tags li a:hover
{
background-color: #D5E4A5;
}
if I delete this style or just comment "background-color: #D5E4A5;" it doesn't happen...
any idea of how to fix it?
thanks!
EDIT: Here's a screenshot of the bug:
just fixed it! :D
what I had before was:
<div class="options clearfix">
<!--content here-->
</div>
and I replaced for:
<div class="options">
<div class="clearfix">
<!--content here-->
</div>
</div>
Now IE6 is happy, and I'm happy as well...
Thank you everybody for your help!
This is usually a border getting set that wasn't defined originally. Try setting a border on the growing DIV to the default background color. My guess is that you won't see anyting grow anymore.
I think I ran into this once, and what was happening was that the borders were being modified (or was it the margins?) I ended up copping out, and just giving the problematic elements a transparent border of 1px, and calling it a day.
I really doubt this will turn out to be your solution, but I'm hoping it'll give you some idea in which direction to look in!
I've had that happen to me as well, but I can't remember where that was exactly. I think I did solve it, but I'm not entirely sure how anymore. I can think of two things:
Give the element "layout". I tend to do that with zoom: 1.
Add vertical-align: top to either the a or li element.
Could you give a more complete code example? I can't reproduce it with just that CSS.
Did you specify the height for that div explicitly? If not, setting the height might make this go away.
Are the tags located in a place where you could give them background color all of the time? If so, does setting their background color when :hover is not activated still cause their height to change?
As a note, I can't reproduce this given HTML matching the rule you described, so the problem may be coming from somewhere else higher on the page.
<!-- This does not display the described behavior -->
<div class="options">
<ul class="tags">
<li>c++</li>
<li>not-programming-related</li>
<li>cheese</li>
<li>barnacle</li>
</ul>
</div>
The best thing I can suggest is to do what mercator said and give the element layout.
EDIT: Just a shot in the dark, but you may want to try setting a value for line-height on div.options.
EDIT 2: After seeing your screenshots I recall that I have had this problem at work before, and the fix in my case was to add position:relative; zoom:1; to the container (or maybe the links, I forget!). Try that?
EDIT 3: After googling for some solutions, you may want to try setting the height if your container explicitly. If this doesn't work, I have no idea what to do!
I have this exact problem as well. The trigger is definitely the background color on hover, but the usual solutions of giving the parent hasLayout don't work, I think because of nesting the A tags inside other tags. From what I ended up doing, your solution of nesting the clear fix is the right logic: separating the offending element, parent and clearing objects.
The solution I did was the following:
<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>
With the following CSS:
.ie6clear{ clear:both; height:0; overflow:hidden; }
This way the clearfix CSS is only applied for IE6, highlights what the extraneous markup is, and makes it easy to remove when IE6 is no longer supported.