Can anyone explain why I get a vertical overflow with this code please?
<html>
<body style="width:120px; height:120px; background-color:white;">
<div style="padding:20px; background-color:blue;">
<div style="width:100%; height:100%; background-color:white">
<div style="padding:20px; background-color:green;">
<div style="width:100%; height:100%; background-color:white">
</div>
</div>
</div>
</div>
</body>
</html>
In Chrome 8 it renders like this:
I'm assuming you want it to look as it does, but with the green border not protruding outside the blue one, and the whole thing fitting inside 120px * 120px.
You aren't specifying a doctype in that code, so it becomes difficult to make things work between different browsers - some browsers will fall into "quirks mode".
With the code you gave, IE8 for instance stretches the layout to the width of the window.
The first step to make it look consistent is to add a doctype, such as the HTML5 doctype:
<!DOCTYPE html>
Adding that makes it look consistent between Chrome, IE8, Firefox, Opera:
..but it also makes it look wrong, and there's no simple way to fix it because you're trying to mix % and px based measurements (a simple fix would be to use just % or just px). Using height: 100% and padding: 20px will make the element too tall because it's total height will be the padding plus the height of the parent element (this is the reason for your "overflow").
So here's some new code which gives the visual effect you're looking for using a different method:
Live Demo
<!DOCTYPE html>
<html>
<body style="width:120px; height:120px">
<div style="background:blue; width:100%; height:100%; position:relative">
<div style="background:green; position:absolute; top:20px; right:20px; bottom:20px; left:20px">
<div style="background:white; position:absolute; top:20px; right:20px; bottom:20px; left:20px"></div>
</div>
</div>
</body>
</html>
Related
I hesitate to say that there’s a bug in wordpress but this has gotten me stumped. When I view the following in chrome as a html file it works perfectly. When I try to do this in wordpress I have all sorts of issues on different mobile devices. Essentially, the left and right id’s are not taking up the width that’s being assigned. I deactivated all plugins except add css code and I did a healthcheck, neither yield any insight to the problem. Here’s the code:
<!DOCTYPE html>
<html>
<head>
<style>
#container{
display:flex;
justify-content:start;
width:100vw;
font-size:3vw;
}
#left{
width:35vw;
border:solid black 1px;
border-shadow:border-box;
}
#right{
width:65vw;
border:solid black 1px;
border-shadow:border-box;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="left">mobile</div>
<div id="right"> different devices have problems</div>
</div>
</body>
</html>
The page I need help with: https://www.sustainablewestonma.org/test-2/
On your website, there's a CSS rule for html, body which contains min-width: 490px
This causes your body to be wider than the screen on small devices (i.e. more or less any smartphone in portrait orientation). The right/left rules apply, but their percentages are calculated from body width 490px.
I'm totally clueless to describe my problem clearly enough so I tried to make a jsfiddle as simple as possible here: http://jsfiddle.net/Emf2f/. On Chrome+IE, my image is under #div3, while on Firefox, is next to #div3. Why does this happen? which result is more "standard"?
<div id="div1">
<div id="div2">
<div id="div3"> Text </div>
</div>
<img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>
#div1{
width:500px;
overflow:auto;
border:1px solid red;
}
#div2{
margin-bottom:-1px;
}
#div3{
background:cyan;
float:left;
width:200px;
height:100px;
}
I would use "clear" around the object that you do not want the image to appear inline with. You can read more about positioning here: http://w3schools.com/css/css_float.asp
The site has the exact example you are trying to accomplish.
I added your image into a div tag (div4) then placed the clear:both in the css file for that div and it works properly in Chrome, IE and FF.
div4{Clear:both;}
Let me know if this helps. Thanks.
From a content perspective they are all doing the same thing showing the img inline (as per the HTML spec), what differs is the default overflow behavior. In Chrome and IE they are wrapping as per text (this is actually what I would imagine the correct behavior is) whereas Firefox is not. If you want the image to always display below, mark it as display:block;
I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.
All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.
This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.
I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.
Any ideas on a workaround? Live demo at:
http://www.songtricks.com/Ie6ClearBug.html
<!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>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.left
{
width:300px;
float:left;
background-color:#CFF;
}
.left .navpanel
{
height:300px;
width:200px;
border:solid 1px black;
margin:10px auto;
}
.right
{
margin-left:300px;
background-color:#FFC;
}
</style>
</head>
<body>
<div class="left">
<div class="navpanel">navpanel</div>
</div>
<div class="right">
<div style="width:100%;">this should be at the top</div>
</div>
</body>
</html>
OK I found an answer. New users can't answer their own questions, so here it is.
Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).
So the lowest impact solution is to use:
<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>
This leaves normal browsers unaffected, and puts a safe 99% in for IE6.
I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css.
First you'll need to add float: left to your .right class.
Second, if u set a margin on the same side of a float, IE doubled the margin.
I hope u understand my english..i'm sorry!!
Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px
bye bye
here a minimum version to reproduce the failure:
<!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>title</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
.clear{clear:both;}
.col{float:left;}
.row{margin-bottom:30px;background-color:red;}
</style>
</head>
<body>
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
</body>
</html>
It is a Bug of Firefox or I misunderstand something.
Edit:
Forgot to explain the Problem. When im using margin-bottom for the .row in combination with a float in .col Then the element will be dropped down for the same value as the .row margin-bottom has
I'm not entirely sure why Firefox is behaving differently to other browsers here. It is something to do with collapsing margins.
However, you can easily fix it (no moving down in Firefox, consistency between browsers) by:
Adding overflow: hidden to .row as an alternate way to clear the float.
You can then remove the <div class="clear"></div> because it's no longer required.
Looks fine here:
JSFiddle
You will be wanting padding-bottom:30px; instead of margin-bottom:30px;
i think you are assuming that it should pad the red row 30px on the bottom? You want padding-bottom then. The margin-bottom will put a 30px gap between the .row and the next element underneath it.
check this fiddle for what I mean
there is no failure
make another div with class="row" underneath and you will see the margin-bottom:
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
<!-- here is 30px space -->
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
i think, the problem for him is, when you use firebug and make margin-bottom greater...then the body will go down.
If you use height then the body will not go down. Tested in FF 3.6.15
Or use padding with the margin...then the body do not move down.
Add to my comments here:
.row {
background-color: red;
margin-bottom: 30px;
padding-bottom: 1px;
}
The issue is related to floated elements being removed from the normal flow and you're expecting that element to act the same. Firefox is acting as it should. Sorry I don't have time to work this out.
thirtydot, you are right - this is because of collapsing margins. I was in a similar situation. However, you can't say that it's a bug of only FireFox. In fact, in Chrome, my margins didn't used to collapse even without the float being broken. In FireFox, on the other hand, the margins collapsed for me despite broken float (whether with overflow: hidden/auto, a cleared element between, or whatever). Funnily enough, the margins where collapsing between a child and a parent, which is not supposed to happen according to W3C specs. Moreover, a positive padding fixed this issue.
As a conclusion, I can say that no browser is 100% W3C/IEEE/ISO standards-compliant. However, I don't really care which browser complies to which exact standard. What matters is that they all comply to the same standard. This is not happening, and I doubt it ever will.
I haven't played with CSS for too long a time and am without references at the moment. My question should be fairly easy but googling isn't bringing up a sufficient answer. So, adding to the collective knowledge...
|#header---------------------------------------------------------------|
| TITLE |
|#sub-title------------------------------------------------------------|
|bread > crumb | username logout |
|#sub-left | #sub-right|
|---------------------------------|------------------------------------|
That's what I'm wanting my layout to be. The heading anyways. I wanted sub-title to contain sub-left AND sub-right. What css rules do I use to ensure a div is bound by the attributes of another div. In this case, how do I ensure that sub-left and sub-right stay within sub-title?
Its quite a common misconception that you need a clear:both div at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an overflow:hidden onto the container:
#sub-title { overflow:hidden; }
When you float sub-left and sub-right they no longer take up any space within sub-title. You need to add another div with style = "clear: both" beneath them to expand the containing div or they appear below it.
HTML:
<div id="sub-title">
<div id="sub-left">
sub-left
</div>
<div id="sub-right">
sub-right
</div>
<div class="clear-both"></div>
</div>
CSS:
#sub-left {
float: left;
}
#sub-right {
float: right;
}
.clear-both {
clear: both;
}
This should do what you are looking for:
<html>
<head>
<style type="text/css">
#header {
text-align: center;
}
#wrapper {
margin:0 auto;
width:600px;
}
#submain {
margin:0 auto;
width:600px;
}
#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Head</h1></div>
<div id="sub-main">
<div id="sub-left">
Right
</div>
<div id="sub-right">
Left
</div>
</div>
</div>
</body>
</html>
And you can control the entire document with the wrapper class, or just the two columns with the sub-main class.
I agree with Darko Z on applying "overflow: hidden" to #sub-title. However, it should be mentioned that the overflow:hidden method of clearing floats does not work with IE6 unless you have a specified width or height. Or, if you don't want to specify a width or height, you can use "zoom: 1":
#sub-title { overflow:hidden; zoom: 1; }
This answer adds to the solutions above to address your last sentence that reads:
how do I ensure that sub-left and sub-right stay within sub-title
The problem is that as the content of sub-left or sub-right expands they will extend below sub-title. This behaviour is designed into CSS but does cause problems for most of us. The easiest solution is to have a div that is styled with the CSS Clear declaration.
To do this include a CSS statement to define a closing div (can be Clear Left or RIght rather than both, depending on what Float declarations have been used:
#sub_close {clear:both;}
And the HTML becomes:
<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>
Sorry, just realized this was posted previously, shouldn't have made that cup of coffee while typing my reply!
#Darko Z: you are right, the best description for the overflow:auto (or overflow:hidden) solution that I have found was in a a post on SitePoint a while ago Simple Clearing of FLoats and there is also a good description in a 456bereastreet article CSS Tips and Tricks Part-2. Have to admit to being too lazy to implement these solutions myself, as the closing div cludge works OK although it is of course very inelegant. So will make an effort from now on to clean up my act.
Seriously try some of these, you can choose fixed width or more fluid layouts, the choice is yours! Really easy to implement too.
IronMyers Layouts
CSS Layouts
Layouts Customization Guide
750 Pixel CSS Layouts
950 Pixel CSS Layouts
100 Percent CSS Layouts
more more more
Layout Gala CSS Layouts
Glish CSS Layouts
Code Sucks CSS Layouts
Max Design CSS Layouts
CSS Play CSS Layouts
You can also achieve this using a CSS Grids framework, such as YUI Grids or Blue Print CSS. They solve alot of the cross browser issues and make more sophisticated column layouts possible for use mere mortals.
Best and simple approach with css3
#subtitle{
/*for webkit browsers*/
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack: center;
width:100%;
}
#subleft,#subright{
width:50%;
}
Something like this perhaps...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#container
{
width:600px;
}
#head, #sub-title
{
width:100%;
}
#sub-left, #sub-right
{
width:50%;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
#head
</div>
<div id="sub-title">
#sub-title
<div id="sub-left">
#sub-left
</div>
<div id="sub-right">
#sub-right
</div>
</div>
</div>
</body>
</html>
#sub-left, #sub-right
{
display: inline-block;
}
Via Bootstrap Grid, you can easily get the cross browser compatible solution.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
Div1
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
Div2
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/DTcHh/4197/
You do it like this:
<table>
<tr>
<td colspan="2">TITLE</td>
</tr>
<tr>
<td>subleft</td><td>subright</td>
</tr>
</table>
EASY - took me 1 minute to type it.
Remember the CSS file needs to be downloaded to the client, so don't worry about the waffle about extra tags, its irrelavent in this instance.