I know that this is not an uncommon problem, as a bit of Googling threw up quite a few pages with similar problems to my own. But try as I might I can't fix it so here goes:
I am currently building the website to my rugby team. It has a two column layout, with a main area and a sidebar. The relevant HTML is roughly
<div id="wrapper">
<div id="maincolumn"></div>
<div id="sidebar"></div>
<div class='clear'></div>
</div>
From some of the websites, I have gleaned that I need to set body and html to 100% and all the containers, so I have:
html, body, #wrapper, #innerwrapper, #sidebar { height: 100%; min-height: 100%;
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding-right:5%; }
.clear { clear:both; }
The problem I am having, is that when #maincolumn has a lot of content, the sidebar does not expand all the way down to the bottom of the page which is the behaviour I would like. I made some progress by setting all the containers to 100% and then adding the clear element, but that still only expands it a short way.
Instead of floating, you can use CSS tables:
#wrapper {
display: table;
}
#sidebar, #maincolumn {
display: table-cell;
}
Demo
Since you want both columns to have the same height regardless of the amount of content within them, first you have to understand that setting height:100% sets the height in relation to the width of the parent div(or containing block).
So if that's the case, here's what you can do:
#wrapper{
height:900px;
}
#sidebar{
height:100%;
}
#maincolumn{
height:100%;
}
DEMO
HTML :
<div id="wrapper">
<div id="maincolumn">vgnhngbbv hbcv nfvfbngbc</div>
<div id="sidebar">dfrtnjnbc ghm gbgfnbvfnythgfbbfg</div>
<div class='clear'></div>
</div>
CSS :
html, body, #wrapper, #maincolumn, #sidebar { height: 100%; min-height: 100%;}
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding:2%; background-color:#ff0000; }
.clear { clear:both; }
DEMO
Related
I am trying to make a 3 column website. Left and right columns are small 240px divs attached to the sides. The middle div is a stretchable area where all the elements inside stretch according to the size of the browser.
So far I have it set up like this :
body, html {
height:100%;
}
body {
margin:0;
}
.container {
background:orange;
height:100%;
width:100%;
overflow:hidden;
}
.left {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
}
.middle {
width:100%;
height:100%;
background:orange;
}
.right {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
right:0;
}
And:
<div class="container">
<div class="left"></div>
<div class="middle">
// all the content
</div>
<div class="right"></div>
</div><!--container-->
How do I make the content in the middle column stay in between the left and right columns? I was thinking to use margin-left and margin-right but I feel it is not a good way of doing it.
Live:
http://codepen.io/daydreamer/pen/0479cc8de929cedc2ac519280a3044aa
If you are supporting modern browsers, I would try using flexbox:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.container div {
flex-grow: 1;
height: 50px;
}
.side {
max-width: 240px;
min-width: 240px;
background: red;
}
<div class="container">
<div class="side"></div>
<div class="middle">
// all the content
</div>
<div class="side"></div>
</div>
jsfiddle example
Flexbox resource
You don't need to use margin-left, but margin-right would be useful. I would use float: left and get rid of position: absolute on the left sidebar, and use margin-right: 240px and get rid of width: 100% on the middle div.
CSS:
.left {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
top:0;
left:0;
float:left;
}
.middle {
height:100%;
background:orange;
margin-right: 240px;
}
.right {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
right:0;
}
Use Twitter Bootstrap to do n-column design and it will save you a lot of work. Right click on inspect the HTML code on the example page I provided and you'll see that all you need to do is set classes to a few div's and it works when you include the bootstrap JS/CSS files.
HTML code:
<div id="container>
<div id="wrapper">Some text
</div>
</div>
CSS code:
div {
position:fixed;
display:block;
}
#container {
max-width:1500px;
height:10%;
}
#wrapper {
width:50%;
height:10%;
}
Now, my wrapper and container have the same size, although you would expect that the wrapper is half the height of the container, and one tenth the height of the container. Unfortunately, they are evenly big right now. Can someone please help me out?
You need to change max-width to width on #container to get the width right:
#container {
width: 1500px;
height: 10%;
}
And you need to remove position: fixed and set height on html, body to get the percent height to work:
html, body {
height: 100%;
}
div {
position: fixed;
display: block;
}
JSFiddle
(You're also missing an ending " in the container div, but I assumed that was a typo)
#container {
display:block;
position:fixed;
width:100%;
height:10%;
background-color: blue;
}
#wrapper {
display:block;
position:relative;
width:50%;
height:100%;
background-color: red;
}
I've created a JSFiddle to describe what I mean:
http://jsfiddle.net/3yGLT/
I want my .top section to be affected by the height of the .floated-div, as you can see. At present, my .floated-div content drops over the .bottom section, which is not what I want. The height of the .floated-div needs to dictate the height of the .top section, effectively pushing .bottom down to make room for it.
I thought Clear divs were the solution I wanted, but it's not giving me the behaviour I'm after. I think this would only apply if the main content of .top was in a similar div to floated-div and not embedded in this way.
I can add things like clears, but I can't adjust the structure of this code as it's something that's generated through the CMS.
HTML
<section class="top">
<h1>test</h1>
<p>some content</p>
<div class="floated-div">
<h2>aside content</h2>
<p>some aside content</p>
<p>some aside content</p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</section>
<section class="bottom">
</section>
CSS
.top{
width: 60%;
height:auto;
background:#f1f1f1;
}
.floated-div{
width:40%;
position:absolute;
right:0;
top:0;
}
.clear{
clear:both;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
}
The problem is that your .float-div doesn't actually float. Because of the "position: absolute" rule it would never affect the height of the parent container (that's the meaning of absolute positioning). To make it float you need to remove this rule and add "float:right" to the div. In this case clearance will do its work.
floated-div {
float: right;
width: 40%;
}
Here is working example: http://jsfiddle.net/qvgz4/
i added this to your css and it worked :
.floated-div > p{margin:0;} /**added**/
.floated-div > h2{margin-bottom:0;}/**added**/
.top{
width: 60%;
height:auto;
background:#f1f1f1;
margin-bottom:5%; /*** added to avoid div overlap **/
}
basically <p> is taking extra area in floated-div1, cleared them through margin!!
If I understand the question correctly, I think the best option is to go with a display:table, like this CSS:
.top{ display:table; width:100%;}
.top .side { display:table-cell; padding:.5em;}
.top .left { width:60%; background:#f1f1f1;}
.top .right { width:40%;}
http://jsfiddle.net/3yGLT/8/
If you want the height of the top block to adapt to the height of the floated div, then you cannot absolutely position the floated div. Your only option then is to float it to the right.
But that will place it below the H1 and P that come before it. The only way to avoid that is to take the H1 and P out of the flow of the document. We do that with absolute positioning.
This solution works only if the height of the floated div is always going to greater than the H1 and P. You will also need to fiddle with the left and top positions of the H1 and P to get it just right.
http://jsfiddle.net/3yGLT/15/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.top {
height:auto;
background:#f1f1f1;
}
.top > h1,
.top > p {
position: absolute;
width: 60%;
left: 10;
}
.top > p {
top: 40px;
}
.floated-div {
width:30%;
float: right;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
}
Without touching html , you can do as below
.top{
width:100%;
background:#f1f1f1;
float:left;
}
.top > h1{
width:60%;
float:left;
position:relative;
}
.top > p{
width:60%;
float:left;
position:absolute;
margin-top:50px; // margin-top depend on your h1 height
}
.top .floated-div{
width:40%;
float:right;
}
.clear{
clear:both;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
float:left;
}
I have layout comprising of a 100% width header, 2 column content divs (30-70% width) and a 70% width footer (visible only in the bottom of right div).
My HTML mark up is like:
<section id="mySection" >
<header id="headerTop">
</header>
<div id="wrapperLeft">
</div>
<div id="wrapperRight">
</div>
<footer id="footerRight">
</footer>
</section>
My CSS is
#mySection
{
margin:0 auto;
padding:0;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
#headerTop
{
position:absolute;
top:0;
left:0;
height:40px;
width:100%;
overflow:hidden;
}
#wrapperLeft
{
position:absolute;
top:40px;
left:0;
width:30%;
bottom:0;
overflow:auto;
}
#wrapperRight
{
position:absolute;
top:40px;
left:30%;
width:70%
bottom:30px;
overflow:auto;
}
#footerRight
{
position:absolute;
left:30%;
bottom:0;
width:70%;
overflow:hidden;
}
I would like to know if I can design this better such that if i hide the left or right div, the other div is displayed at 100%. I think i can change the CSS dynamically via javascript and adjust the left and width values for the other div, but it is getting messy and would like to avoid it if possible.
Ideally would love to call show or hide on the div and the other div automatically adjusts itself to 100% width.
I have no control over the height of the content in either div and would want the browser to display scrollbar when the content height exceeds the window.
Thanks in advance for your help.
I would add a wrapper to the divs so you can float then instead of positioning then absolutely. This way you can make at least one div 100% wide. For instance the right div. If you want both divs to be dynamic in size you will have to use jquery. For instance adding classes if you want to keep the jquery to a minimal.
example HTML:
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
example CSS :
#main{
position:relative;
overflo:hidden // This will make the container grow with the children
width:960px;
}
#left{
width:200px;
float:left;
height:100%;
}
#right{
float:left;
width:100%;
height:100%;
}
Example of CSS with additional classto toggle divs
#main.only-left #left{
width:100%;
}
#main.only-left #right{display:none;}
I think I know what you're talking about. I've created a little example here. Basically set 30% on the sidecolumn, and display: block; on the main column. Click on the body anywhere to toggle the side column to show how the main column adapts... is this going in the right direction?
Codepen sketch
HTML
<div class='wrapper'>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<article>Main article</article>
</section>
<footer>Footer</footer>
</div>
CSS
body {
margin: 0;
padding: 0;
}
section {
overflow: hidden;
position: relative;
}
header {
background: crimson;
height: 100px;
width: 100%;
}
aside {
background: #efefef;
float: left;
height: 300px;
width: 30%;
}
aside.hide { display: none; } /** For demo purposes **/
article {
background: #ccc;
display: block;
height: 300px;
}
footer {
background: crimson;
float: right;
height: 100px;
width: 70%;
}
jQuery (just for hideToggle example)
$('html').on('click', function(){
$('aside').toggleClass('hide');
});
UPDATE: Here's an example with a little assitance from jQuery for class toggling. Could probably be generalized more... http://codepen.io/kunalbhat/pen/kuAcg
I know this is a sort of a common problem, and I looked up some solutions, but couldn't find exactly what I was looking for.
I would like to convert this to a tableless layout.
Note: header and footer have to be set to a fixed height in pixels (50px is ok).
The main problem I'm having is that I cannot get that "big box" in the middle to behave like it does when it's done with tables. There are solutions which work OK for a variable length content (text, images), but I would like this box look and behave like a box - with borders, rounded corners and all.
You can do it with table style CSS properties, but still retain table less markup (which is still a win).
Example
HTML
<div id="container">
<div id="header"><div>header</div></div>
<div id="content"><div>content</div></div>
<div id="footer"><div>footer</div></div>
</div>
CSS
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container > div {
display: table-row;
width: 100%;
}
#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;
}
#header > div {
height:50px;
border:solid 2px #aaa;
}
#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}
#footer > div {
height:50px;
border:solid 2px #a55;
}
jsFiddle.
'Multiple absolute co-ordinates' is a nice way to achieve this. This is when you absolutely position a box, then give it both top and bottom co-ordinates. Without specifying a height, you get a box which wants to be 10px from the top, and 10px from the bottom edges of its parent.
Here's an example
There is an IE6 specific style you'll need to add, if you care about that browser.
Here's an article on the technique (plus the IE6 fix) - it's a good one to know, even if you don't use it for this problem.
You haven't said anything about heights of your sub elements, so I have had to make some presumptions. You could use percentages if you wanted.
<style>
html,body {margin:0;padding:0;
}
#mainContainer {
height:100%;
width:100%;
}
#header {
height:15%;
width:100%;
background-color:red;
}
#center {
height:75%;
width:100%;
background-color:blue;
}
#footer {
height:10%;
width:100%;
background-color:pink;
}
</style>
<body>
<div id="mainContainer">
<div id="header">Header</div>
<div id="center">Center</div>
<div id="footer">Footer</div>
</div>
</div>
</body>