I have a float issue in IE6&ie7:
<!DOCTYPE html>
<html>
<head>
<title>lily</title>
<style>
div{width: 100px; height: 100px;}
.div1{background: red; float: left;}
.div2{background: yellow;}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
why it displays different in IE6&&IE7 and Chrome? And how to solve it in ie6&ie7?
:
<!DOCTYPE html>
<html>
<head>
<title>lily</title>
<style>
div{width: 100px; height: 100px;}
.div1{background: red; float: left;}
.div2{background: yellow; clear:both;}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
Your second div is clearing your first, but only the text. If you set a left margin you can tell it to sit next to the floated div.
http://jsfiddle.net/Pjvtb/
.div2 {
margin-left: 100px; /* new line */
background: yellow;
}
Note: IE 6 and 7 incorrectly move the second div past the first one, due to hasLayout. You can search online for more information about the problems associated with it. There is also a 3px "text jog" present in IE 6 (possibly 7 too, I can't remember) which usually meant, to display the same in all browsers, one would actually make the margin-left: 103px to accommodate IE's weirdness.
First things first, try it with both of the divs floating and see what happens.
HERE is a FIDDLE with each scenario for you to test.
/* yours */
.yours div {
width: 100px;
height: 100px;
}
.yours .div1 {
background: red;
float: left;
}
.yours .div2 {
background: yellow;
}
/* mine */
.mine div {
width: 100px;
height: 100px;
float: left;
}
.mine .div1 {
background: red;
}
.mine .div2 {
background: yellow;
}
/* mine with a cleared float */
.mine-too div {
width: 100px;
height: 100px;
float: left;
}
.mine-too .div1 {
background: red;
}
.mine-too .div2 {
background: yellow;
clear: left;
/* not BOTH - you only need left - there is no right... */
}
Related
I have a div with three divs in it like this:
#parent
#child-1
#child-2
#child-3
And I want it to look like this:
Child 2 should use up the available space vertically, because child-3 is display:none as default, and only on some event it would show up, so it should push child-2 up. child-3 should be as high as it needs to be as well.
I like to use flexbox, but I think I cannot use it here.
It would be really easy to put them in another div, and just do a flex on that box and flex-direction:column, but I do not have this opportunity, so they will be in the same div as child-1.
So what is the easiest way to accomplish this with pure CSS without touching the HTML structure?
Here's one working example:
#parent {
height: 50em;
}
div[id^=child] {
border: 2px solid black;
box-sizing: border-box;
}
#child1 {
height: 100%;
min-height: 32em;
background: red;
width: 30%;
float: left;
margin: 0;
}
#child2 {
height: 60%;
background: green;
width: calc(70% - .4em);
margin-left: calc(30% + .4em);
margin-bottom: .4em;
}
#child3 {
height: calc(40% - .4em);
min-height: 10em;
background: yellow;
width: calc(70% - .4em);
margin-left: calc(30% + .4em);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div id="parent">
<div id="child1">
</div>
<div id="child2">
</div>
<div id="child3">
</div>
</div>
</body>
</html>
I've been doing the codeacademy HTML/CSS course and understood it fine right up until the end where I had to 'Build a Resume'. I've compared my code to the example at the start of the exercise but I just can't understand why my .right class is sitting at the far right and not lining up correctly. Also the header and the footer are the same width (95%) but the footer is noticeably smaller and doesn't stretch as far across the screen as the header.
Any idea's?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
div {
border-radius: 5px;
}
#header {
width: 95%;
height: 50px;
background-color: lightblue;
position: fixed;
z-index: 1;
}
.left {
position: relative;
background-color: lightgreen;
height: 400px;
width: 20%;
float: left;
margin-top: 60px;
}
.right {
position: relative;
background-color: lightgray;
height: 400px;
width: 74%;
float: right;
margin-top: 60px;
margin-bottom: 10px;
}
#footer {
position: relative;
background-color: gray;
width: 95%;
height: 60px;
clear: both;
}
your .right is sitting at the far right because of float: right;, telling the div to float to the right until it hits something(screen/browser edge or another div). If you want it to connect snugly against your left div, try float: left;, which will float that div towards and against your existing .left div.
I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main div does not have the proper height to englobe the inner divs.
Here is the HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
</div>
and the CSS:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
float: left;
}
#b {
background: green;
float: right;
}
Here is the JsFiddle: http://jsfiddle.net/mPH4H/
I should see a red frame, but there is none.
The floated elements are removed from the flow of the document, so the parent container thinks that it has nothing inside of it. You can add overflow:auto to your CSS rules for #frm to bring the background back and "contain" the floated children:
#frm {
background: red;
width: 100%;
height: auto;
overflow:auto;
}
jsFiddle example
overflow:hidden; will give height to #frm
Try:
#frm {
background: red;
width: 100%;
height: auto;
overflow:hidden;
}
DEMO here.
OR
Clear floats:
HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
<div class="clr"></div>
</div>
CSS:
.clr{clear:both;}
DEMO here.
i think this is worked as fine:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
width: 50%;
float: left;
}
#b {
background: green;
width: 50%;
float: right;
}
I've looked at 20 threads at least so far so sorry if this has been answered before but I couldn't find a solution that suits my particular css layout.
I want to set the height of 2 columns equal to each other in a way that the leftcolumn equals the contentcolumn. I've tried using multiple javascripts like this :
`
$(document).ready(function() {
// get the heights
l = $('#contentcolumn').height();
// get maximum heights of all columns
h = Math.max(l);
// apply it
$('#leftcolumn').height(h);
});
And:
document.getElementById("leftcolumn").style.maxHeight = document.getElementById("contentcolumn").style.height;
And:
$("#contentcolumn").height($("#leftcolumn").height())
The problem with the first code is that it drops the left div to some really long height which I don't even know. The second and third codes change nothing at all.
Can someone please help me I know there's probably a really simple solution to this problem but I just can't find and I just can't go to sleep until I do !
New webpage after clean up:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn">
</div>
</font>
</body>
</html>
New CSS after clean up:
body,
html {
background: #cacaca url(img/bg.png) repeat-x;
}
#maincontainer {
width:1000px;
margin:0 auto;
background: url(img/bg5.png) repeat-x;
}
#topsection {
background: #ffffff url(img/bg4.png) repeat-y;
height: 10px;
}
#leftcolumn {
float:left;
height: 100%;
width: 145px;
background: url(img/bg2.png) repeat-y;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 800px;
height: auto;
background: #dbdbdb url(img/bg3.png) repeat-x;
padding:10px;
}
You can do this without javascript--in a cross-browser way, even. This takes advantage of absolutely-positioning elements within relatively-positioned elements. If you set your #maincontainer div to position: relative and your #leftcolumn div to position: absolute, you can then set both top and bottom on #leftcolumn, so it always assumes the height of its parent (#maincontainer), even though #maincontiner's height is being set by its children (#contentcolumn in this case). Use this jsfiddle demo and play with #contentcolumn's height to see how #leftcolumn responds.
HTML:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn"></div>
</div>
</body>
</html>
CSS:
body,
html {
background: #cacaca;
}
#maincontainer {
position: relative;
width:500px;
margin:0 auto;
background: #000;
}
#topsection {
background: #ffffff;
height: 10px;
}
#leftcolumn {
position: absolute;
top: 10px; /* room for #topsection */
bottom: 0;
left: 0;
width: 145px;
background: red;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 500px;
height: auto;
background: #dbdbdb;
padding:10px;
}
%19 Left Section Width, %80 Content width:
But i want to fix left section to 200px and content section is the rest of viewable area's width.
How can i do this with CSS?
<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
div
{
border: 1px solid black;
}
#header
{
background: #0f0;
width: 100%;
}
#leftcol
{
background: #f00;
float: left;
width:19%;
/* max-width: 200px; */
height: 500px;
}
#content
{
background: #fff;
float: left;
width: 80%;
height: 500px;
}
#footer
{
background: #0f0;
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
Header Section</div>
<div id="leftcol">
Left Section</div>
<div id="content">
Content Section</div>
<div id="footer">
Footer Section</div>
</body>
</html>
There's plenty of ready made templates that would work here, take a look at these for example:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
http://bonrouge.com/2c-hf-fluid.php
Take a look: http://www.brunildo.org/test/lf100r.html