Just need help as I have been trying sort this out for ages now. What I need:
I've got a 2 column layout, where the left column has a fixed width 220px and the right column has a fluid width.
Code is:
<!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>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; float: left; }
.main,
.sidebar { background: #eee; min-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
</div>
</body>
</html>
There's no problem at all. When I use a css syntax clear: both in the right column, all content after gets moved under the left column. This is a right behaviour and nothing against it.
But I relly need to use clear: both in the way, that it stays just in context of the right column (doesn't get affected by the left column at all, and doesn't move underneath)
Is there any simple get around with retaining a basic float concept of page design?
UPDATE: Please see this link to know what I'm on about as it may be a bit confusing from my description.
Link: http://jsfiddle.net/k4L5K/1/
Here's your altered CSS:
html, body {
background: #ccc;
}
.wrap {
margin: 20px;
padding: 20px;
padding-right:240px;
background: #fff;
overflow:hidden;
}
.main {
margin: 0 -220px 0 auto;
width: 100%;
float:right;
}
.sidebar {
width: 200px;
float: left;
height: 200px;
}
.main, .sidebar {
background: #eee; min-height: 100px;
}
.clear { clear:both; }
span { background: yellow }
Basically what I've done is change the way your layout is done, so that .main div is floated on the right. To do this, we had to add 2 things:
A padding of 240px on the .wrap div, and
A right margin on the .main div of -220px to properly align the fluid part of the page.
Because we've floated the .main div on the right, the clear: both; now only affects content inside the .main div, as you want.
You can see a demonstration here: http://jsfiddle.net/6d2qF/1/
The question is quite old but here is the another solution which I've found recently.
We just need to do 2 things:
Add overflow: auto; to the .main div
Make sure wrapper preserves document flow by adding overflow: hidden; to the .wrap div, or adding .clear div as the last child of .wrap element
Here is the updated fiddle: http://jsfiddle.net/k4L5K/89/
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">
<head>
<title>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; }
.main,
.sidebar { background: #eee; min-height: 100px; float: left; }
.clear {clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
<div class="clear"></div>
</div>
</body>
</html>
Related
This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 7 years ago.
Though it's a very simple HTML, CSS layout, I am facing problem with this. It does not look like what I want it to be.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
body {
margin: 0;
padding: 100px;
width: 100%;
}
div.container {
border: 3px red solid;
padding: 10px;
display: block;
width: 1000px;
}
div.left, div.right {
float: left;
margin: 0 10px;
}
div.left {
background: blue;
height: 300px;
width: 300px;
}
div.right {
background: green;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">This is the main container
<div class="left">This is the left side</div>
<div class="right">This is the right side</div>
</div>
I want to know why left and right blocks overlaps the container element?
</body>
</html>
Why left and right blocks overlaps the container element?
I uploaded a screenshot of the code executed in Chrome on PC. Here is the Google Drive preview link: https://drive.google.com/open?id=0B4av_i4gqoZmRFpXbzVZekR0aGs&authuser=0
Thanks in advance.
Add this style in your CSS file:
.container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}
This should solve the Issue!
Here is a simple piece of code, resulting in blue span element overflowing out of yellow and black box.
I know, I can use overflow property to hide/scroll it, but I rather need to resize the #inner and #outer containers to cover it (so that scrollbar would rather be on whole page instead of in the containing div). Is there any way?
The content ( = width) of "blue span" is dynamicly generated from application?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; width: 400px; }
</style>
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</html>
If you want the two outer boxes to resize dynamically based on the content thats inserted in the span, you will have to reconsider your approach. All boxes that scale dynamically cannot have a width defined, so they cannot be centred using the margin: auto. However, it is possible to achieve the same effect by wrapping the whole thing into another box that covers the full width of the page, text-align centring that box and then making the outer box displayed inline-block. This is the code that works. Now you can add a min-width to the content box if you want and it will scale nicely. Heres some code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#wrap {
width: 100%;
text-align: center;
}
#outer {
display: inline-block;
background: black;
margin: 10px 0;
padding: 20px;
}
#inner {
background: yellow;
height: 200px;
}
#inner span {
background: blue;
display: block;
}
</style>
<div id="wrap">
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</div>
</html>
I think so you can add % units for your divisions to make it as perfect
Here is the CSS
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; }
Here is the fiddle
http://jsfiddle.net/mohamedmusthafac/n6CEx/
I think so this is what you are expecting for??
I think the two states shown in the image are self-explanatory. The red lines have the same height, the blue bars have the same dimensions.
How can I achieve this layout? My attempt so far (may be used for testing): http://jsfiddle.net/n6zYE/
The doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> but could be changed to <!DOCTYPE html>.
The problem is, that I see no way to keep the red line the same height when the content gets bigger while still having no scrollbar when the content is small enough.
The restrictions are only, that I do not want to use anything that is supported by less than 90% of the users. For example box-sizing luckily is supported by ~93% of the users.
EDIT: I need a box-shadow on the black area, so overlays will not solve the problem. But besides this, Nulen made a working example (http://jsfiddle.net/n6zYE/2/) of how it shall behave.
You can do it dirty way with black divs as black margins with content like this:
#content {
min-height: 100%;
background: grey;
color: white;
width: 500px;
margin: 0 auto;
padding: 20px 0 70px 0;
box-sizing: border-box;
}
http://jsfiddle.net/n6zYE/2/
modify height of #inside div to test for different content.
EDIT: done with calc():
http://jsfiddle.net/n6zYE/9/
EDIT: done with overflow: auto;:
http://jsfiddle.net/n6zYE/10/
(note: this does not work entirely for my IE11) //nulen
I'm not 100% sure if this is what you require but give this a try
#foot { position:fixed;left:100px;}
#content {height:500px;overflow:hidden;
You will need to put position:relative around the containing div and also change the height accordingly on content div.
Typically you would wrap the actual content in a container that is set up to scroll. That way you can control the wrapper's height, and its content will scroll within it.
<div id="#bodyContent">
<div id="#wrapperThatScrolls" style="overflow-y:auto" >
<p>Content</p>
</div>
// Your red margin would appear here
</div>
Solution, using display: table, display: table-row and display: table-cell:
html { height: 100%; }
body {
background: green;
padding: 0;
margin: 0;
height: 100%;
}
#inside {
border: 2px solid white;
height: 200px;
}
#topcontentrow, #bottomcontentrow {
display: table-row;
height: 20px;
}
#contentrow {
display: table-row;
background: grey;
box-shadow: 0px 0px 20px 0px #000;
}
#content {
display: table-cell;
padding-bottom: 40px;
color: white;
}
#contenttable {
display: table;
height: 100%;
width: 500px;
margin: 0 auto;
}
#foot {
height: 40px;
position: relative;
margin: -60px auto 0;
background: blue;
width: 500px;
}
<div id="contenttable">
<div id="topcontentrow"></div>
<div id="contentrow">
<div id="content">
<div id="inside">
</div>
</div>
</div>
<div id="bottomcontentrow"></div>
</div>
<div id="foot">
</div>
Tested and working in FF 31.0 and IE 11
The display: table is supported widely.
I have a div wrapped in another div.
The parent div is set to:
display:table
The child div is set to
div:table-cell
This is in order to vertically and horizontally centre some text.
But I aslo need to define the size of that text. This is becasue the div needs to float in the centre of the browser window, and the window itself is on a long page too.
I have uploaded a screenshot to show you what i mean.
So, this is why i need to define the height and width of my table-cell div too. It needs to fit within that circle.
I'm at a loss as to why i cant set the height or width of this table-cell.
I also need to do this in CSS, not jquery as it'll be the first thing that people see when the page loads, and there will be a lot of content on the landing page.
I've put the code here:
http://jsfiddle.net/Kpr9k/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div as Table-Cell Width/Height Mystery</title>
<style type="text/css">
body, html {
width:100%;
height: 100%;
background-color: gray;
margin: 0;
padding: 0;
}
#myTable {
margin: 0;
display: table;
width: 100%;
height: 100%;
border: 1px red solid;
}
#myCell {
display: table-cell;
max-height: 500px;
max-width: 500px;
min-height: 500px;
min-width: 500px;
height: 500px;
width: 500px;
text-align: center;
color: #000000;
line-height: 36px;
vertical-align: middle;
border: 1px yellow solid;
}
</style>
</head>
<body>
<div id="myTable">
<div id="myCell">I cannot define the width of a table cell and its driving me insane! The yellow border is the table-cell, however its been defined to be (min, max AND regular!!) as a 500px square.Instead, it's just defaulting to be 100%.</div>
</div>
</body>
</html>
I think the behaviour of display: table-cell; is to fill any display: table; parent.
EDIT:
Confirmed this by mucking around with your code on jsfiddle.
My suggestion to you would be to use absolute positioning to center the container div in the page, and use display: table-cell; on the inner div to get your vertical alignment.
Here is the answer:
I'm surprised by how complicated this was, anyone have a better solution?
http://jsfiddle.net/2Z2BF/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Browser Centred Div Overlay - WITH Specified Width and Height</title>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
#stopTheOverlayFromAffectingTheContent {
position: absolute;
width: 100%;
height: 100%;
}
#verticalFix{
height:50%;
margin-top:-250px;
width:100%;
}
#horizontalFix {
width:500px;
height:500px;
margin-left:auto;
margin-right:auto;
}
#myTable {
background-color: aqua;
display: table;
width: 100%;
height: 100%
}
#myCell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#contentBelow {
height:3000px;
}
h1 {color:#fff;margin:0;padding:0}
</style>
</head>
<body>
<div id="stopTheOverlayFromAffectingTheContent">
<div id="verticalFix"></div>
<div id="horizontalFix">
<div id="myTable">
<div id="myCell">Lorem Ipsum</div>
</div>
</div>
</div>
<div id="contentBelow">DEVIL</div>
</body>
</html>
I have the following defined in my css file:
body {
text-align: center;
float: right;
position: fixed;
}
.twoColFixRtHdr #container {
width: 780px;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
and I have my HTML defined as follows:
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
The problem is, in IE (all versions I've been able to check) center the content of the page, but in Firefox, it's left-aligned. I know that text-align:center will center the content of the element, but not the element itself, so you have to nest your content, which is what the extra div is for. But I must be missing something about the differences between IE and Firefox in terms of how it renders this tag.
Any ideas? You can look at the site: http://www.solar-fit.ca
these two cause the problem
body ->
float: right;
position: fixed;
remove those
You tried this yet?
#container{
width: 780px ;
margin-left: auto ;
margin-right: auto ;
}
You shouldn't need the nested div with this approach. According to the source ...
"The code above has been tested with
IE 6, 7, Firefox, Opera and Safari."
How about putting margin: 0px auto; in body ?
Not sure about the cause, but a fix is putting IE into standards mode via a DOCTYPE, e.g.
<!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">
body {
text-align: center;
float: right;
position: fixed;
}
.twoColFixRtHdr #container {
width: 780px;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
</style>
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
Some text goes here
</div>
</div>
</body>
</html>
Remove the float and position properties from the body rule and add 100% width.
body { text-align: center; width: 100% }