Hi this is a simplified version of an issue I'm having with IE7. Basically the divs following the cleared div (green) don't behave as expected (in IE7). It works as expected in Safari, FF etc and IE8.
Does anybody have any advice for a fix. Thanks for any help :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#wrap {width:600px;height:1000px;background:black;}
.box {width:179px;height:180px; float:left; border-right:1px solid white;border-top:1px solid white;margin-right:20px;background:blue;}
.clear{clear:left;}.small{height:100px}.xsmall{height:50px}.first{background:red;}.second{background:yellow;}.third{background:pink;}
.fourth{background:green;}.fifth{background:aqua;}</style>
</head>
<body>
<div id="wrap">
<div class="box first"></div>
<div class="box small second"></div>
<div class="box xsmall third"></div>
<div class="box clear fourth "></div>
<div class="box fifth"></div>
<div class="box sixth"></div>
</div>
</body>
</html>
You can...
A) insert a "divider" clear element between 3rd and 4th which will do clear:both, span a height of 1px, take up the entire width, and then margin-top:-1px on 4, 5, 6 so there's no vertical 1px gap in between.
B) use inline-block instead of floats, like this: http://jsfiddle.net/gLcNm/16/
This requires markup change so there are no whitespace between your box divs, AND a css hack for IE which doesnt natively do inline-block without redeclaring inline for block levels.
C) make each of those box divs be contained by a "row" div:
<div class="row">
<box><box><box>
</div>
Then make row clear so it'll contain the boxes.
Related
Consider we have 10 boxes. After hovering at say 5th box, the ones on its left move -81px(to the left), and the ones on its right move 81px(to the right).
So the one that has not been transformed (the one which we are hovering onto) still has the same width as it had before even though its width is set to 100%. Can someone please explain to me why can't the space left from the transformed elements be used from the one in the middle ?
You can see it in action here
//css:
.boxwrapper{
display:block;
>div{
display:inline-block;
border: solid 1px grey;
width:auto;
padding:20px;
background-color:white;
&.before{
transform:translateX(-20px);
}&.after{
transform:translateX(20px);
}
}
}
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<div class="boxwrapper">
<div data-number="1" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 1</div>
<div data-number="2" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 2</div>
<div data-number="3" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 3</div>
<div data-number="4" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 4</div>
<div data-number="5" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 5</div>
</div>
</body>
</html>
Thanks.
Transformations don't affect the flow of elements, only the visual rendering. I know it looks like the div should have more space and be able to expand but in reality it doesn't.
See http://log85.no-ip.org/q100.html
Why the second block is in that position? //in firefox and chrome
Have you tryed to add this CSS :
canvas{display:block;width:100px;height:100px;}
Update: It only because the canvas have a default size bigger than expected in this case witch cause a weird but "normal" reaction of the HTML.
Regards,
Has something to do with the default width and heights of canvas. If you set them to 100%, it fixes the issue.
If you use the following code, it somewhat fixes issue.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>[ LoG85 ] - [ Duda CSS ]</title>
<style type="text/css">
body {background:#012;text-align:center}
.container {width:800px;margin:auto;border:1px solid blue}
.block {display:inline-block;border:1px solid green;width:320px;height:240px}
</style>
</head>
<body>
<div class="container">
<div class="block"></div> I removed <canvas></canvas> from here.
<div class="block"></div>
<div class="block"><canvas></canvas></div>
<div class="block"><canvas></canvas></div>
<div class="block"><canvas></canvas></div>
<div class="block"><canvas></canvas></div>
</div>
</body>
</html>
Note : I haven't tested it on Chrome, since I don't have Chrome installed but it works fine in IE and Firefox.
How can be image center horizontally inside smaller or bigger div, (image is variable and can be bigger then his div wrapper or smaller)?
Exist Javascript solution, but i looking for css solution.
The sample code that not working: (html should be not changed only css)
<!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" xml:lang="en" lang="en">
<head>
<title>my test</title>
</head>
<body>
<div id="wrapper" style="width:300px;margin:0 auto;">
<div id="image_content" style="margin:0 auto;">
<img src="image_small_then_300_or_bigger.jpg" />
</div>
</div>
</body>
</html>
Thanks
You want to center align the image_content within the wrapper?
text-align
<div id="wrapper" style="width:300px;margin:0 auto;text-align:center;">
background-image
<div id="wrapper" style="width:300px;margin:0 auto;background:transparent url('image_small_then_300_or_bigger.jpg') 50% 50%;"> good call #gov
I've been working with this for awhile and I'm pretty sure its unsolvable. Just thought I'd throw it out to find out if someone smarter than I can figure it out (without changing the markup! :)
The layout below is a typical tableless css based design with header and footer sandwiched between two columns (content and sidebar) using floats and relative positioning.
This particular layout is a WordPress theme that I've designed dozens of sites around solely with css and images. That's why my requirement is that the markup remain as is.
I'd like the "avatar" div to stay anchored to the top of the header div regardless of the height of "featured" and without using "position:fixed" or changing the markup order. If you copy the code below and save it as an .html file, you'll see that it does just that right out of the box. However, once you add or subtract height from "featured", "avatar" will move accordingly up or down. That's the challenge, I need avatar to stay at the zero position relative to the body, regardless of the dimensions of "featured".
Setting "sidebar" to absolute positioning would be the obvious solution, however, it suffers in that it will screw up the flow of the footer div below content and sidebar (whichever is taller).
I'm thinking that the answer might lie in one of the table display properties (since this is essentially creating an unmerged cell out of sidebar and setting its top margin relative to its parent container), but that's one area of css that I've largely left alone.
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; margin-top:-150px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
Try this:
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
*{margin:0;padding:0;}
body{margin:0;padding:0;}
.wrapper{width:977px;margin:0 auto;}
.header{height:100px;background:red;}
.leftColumn{float:left;width:700px;}
.featured{background:green;height:50px;}
.content {min-height:300px;border:1px solid #777;}
.sidebar {background:blue;width:250px;float:left;margin-left:27px;min-height:400px}
.avatar {width:200px; background:orange;margin-top:-100px;}
.clear {clear:both;}
.footer{background:gold;height:100px;clear:both;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="leftColumn">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
</div><!--.leftColumn-->
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div><!--.sidebar-->
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div><!--.main-->
</div><!--.wrapper-->
</body>
</html>
How about something like this:
Avatar and Sidebar relative to the header floated right to stay in the flow?
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;z-index:1000;position:relative;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; /*margin-top:-150px;*/ }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div id="header_stuff" style="float:left;">header</div>
<div id="side2" style="float:right;background-color:blue;"><div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div class="sidebar">
<div>This content should flow below avatar relative to avatar's height</div>
</div>
</div>
</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
Edit: Perhaps this is closer. The blue sidebar can be tweaked if the header sections need to be on top (z-index, etc).
I am trying to enclose two DIV elements, inner-1 & inner-2, (dotted red border) inside a wrapper DIV (solid green border) but the wrapper DIV element does not expand to enclose the inner DIVs.
What am I doing wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>
<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;">
content inside "wrapper" div
<div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
content <br />
inside <br />
inner-1 div
</div>
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
</div>
</body>
</html>
Rendered HTML
Since you're floating both #inner-1 and #inner-2, you'll need a clear fix. Basically, setting overflow: auto on the parent (#wrapper) should do the trick.
.
.
.
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<br style="clear:both" />
</div>
.
.
.
Try that.
You can set the margins for the <br /> so that it is hardly visible too.
It is the floats that are giving you the problem.
this might work for you:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>
<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;">
content inside "wrapper" div
<div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
content <br />
inside <br />
inner-1 div
</div>
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
Added "div style="clear: both">" at the bottom of the containing DIV.
It might also be worth noting that there are a few different methods of "clearing floats" out there. This one works pretty well for me and only involves adding a single class to the parent element:
.clearfix:after{content:"\0020";display:block;height:0;clear:both;
visibility:hidden;overflow:hidden;}
As has been said already you need some method of forcing the containing div to realize the floating divs have taken up space. Commonly known as clearing a float, there are quite a few discussions on the topic around the internet.
This post at pathf.com is one of the more popular to use. When you read the article be sure to read all the comments as well.