I need some help, this is bothering me...
I have the following DIV structure:
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
</div>
And the following CSS code to style it:
body, html {
height:100%;
margin:0px;
padding:0px; }
#principal {
width:1000px;
height:100%;
margin:0px auto; }
#colIzquierda {
width:250px;
float:left; }
#colDerecha {
width:750px;
float:right; }
I have a problem when I fill for example #colDerecha with lots of content, and it overflows the height of the windows of my browser, then I can see something like this:
Where the dark grey = #principal, light grey = body, green = #colDerecha.
How can I make #principal gain the same height as #colDerecha always, when #colDerecha content is bigger than the screen size?
I don´t know if I explain myself enough...
Please some ideas? I have tried adding height:100% to both #colIzquierda and #colDerecha, but does not do what I want. It overflows the same, but in other way...
A common approach would be to change the display of the parent element, #principal, to table, then set the display of the children elements to table-cell. In doing so, #colIzquierda and #colDerecha will fill the remaining space.
Example Here
#principal {
width:100%;
height:100%;
background:gray;
display:table;
}
#colIzquierda {
width:25%;
display:table-cell;
}
#colDerecha {
width:75%;
display:table-cell;
background:gold;
}
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
<div style="clear: both;"></div>
</div>
Why use the PHP tag in your question ?
Related
I'm trying to place two divs one above the other. The top div should stay always visible (not scrolling). The div below contains a list, and if the list is too long, and overflows the window/containing div, the div should be scrollable. When defining the height of the top div, it's good, but the content of the top div may change, so the height should not be fixed (like in this question).
My attempt on Plunker.
Is it possible with pure CSS, without JavaScript calculation?
Edit:
The list should strech to the bottom of the screen/container div.
You need to use some not too obvious CSS trickery to get the behaviour you're after, importantly any scrollable content needs to be within a separate container in a CSS table's cell, with overflow-y set, and a height of 100%. The top cell then needs a height of 1% to auto expand as appropriate.
Then all you need to do is set the tables height and max-height as appropriate.
By using CSS tables, you get a lot more flexibility when it comes to layout calculation/manipulation in terms of relating the sizes of elements
Demo Fiddle
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:100%;
width:100%;
max-height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
background:lightgreen;
height:1%;
}
.row:last-of-type >.cell {
background:pink;
}
#list {
height:100%;
overflow-y:auto;
}
HTML
<div class='table'>
<div class='row'>
<div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
</div>
<div class='row'>
<div class='cell'>
<div id="list">
<div class="list-element">These are list elements.</div>
<div class="list-element">If the list is too long</div>
<div class="list-element">and reaches the bottom</div>
<div class="list-element">the list should be scrollable.</div>
<div class="list-element">(And only the list</div>
<div class="list-element">not together with the <strong>list-head</strong>.)</div>
</div>
</div>
</div>
</div>
Will this work for you ?
<div id="top" >
</div>
<div id="bottom">
</div>
<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>
use this structure
<div class="main">
<div class="header">
</div>
<div class="content">
</div>
</div>
.main{
height:100%;
}
.header{
height:50px;
position:fixed;
top:0;
background:#454546;
width:100%;
}
.content{
margin-top:53px;
background:#ffffff;
}
Demo
I have a big div wrapper called <div class="pageWrapper"> for which its size is set to be 1000px.
Inside it I have a header that I want to be 100% of the screen and fixed.
How can I do it ?
I know that I could take off the header div outside the pagewrapper but I'm customizing a volusion template so to take it off would delete all the CSS that was originally set up.
Try the following and see if it works.
Here is Fiddle as created by François Wahl
width:100%;
position:fixed;
And it is always good if you post the code you have tried first.
Do you want something like Demo ?
HTML
<div class="pageWrapper">
<div class="header">Header</div>
</div>
CSS
body {
margin: 0;
}
.pageWrapper {
width:500px;
background:green;
height:500px;
margin:0 auto;
}
.header {
position:fixed;
width:100%;
top:0;
left:0;
right:0;
height:50px;
background: red;
}
I am new to CSS and HTML, I have one problem with regard to height of floated elements:
when I set the height of the "content" div to anything more than or equal to the "main" div height, then the margin top of footer is showing correctly, but as soon as I change the height of content div to auto, margin top of footer is not working. I would really like to know is there any solution which makes the content height auto but respects the margin top of footer. Please help me. I've tried everything: clearfixes of every kind, overflow etc.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</div>
#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }
Use the overflow:hidden Property .
“overflow: hidden” is often used for the purpose of float containment.
It can do more special things, however: prevent an element's margins
from collapsing with its children and prevent an element from
extending “behind” an adjacent floated element.
Source: The magic of “overflow: hidden”
#content{
width:800px;
height:auto;
background:#999;
overflow:hidden;
}
see jsFiddle
Quick fix...here's a Fiddle
#container{width:800px;height:auto;background:#000;}
#header{position:relative;width:800px;height:80px;background:#333;}
#content{position:relative;width:800px;height:500px;background:#999;}
#main{position:relative;width:600px;height:800px;background:skyblue;float:right;margin-bottom: 10px;}
#sidebar{position:relative;width:200px;height:800px;background:silver;float:left;margin-bottom: 10px;}
#footer{position:relative;width:800px;height:80px;background:green;clear:both;}
The problem with your set-up is that when you set the height of #container to auto, its height is actually computed to zero. This is because #container contains purely floated elements, and they are ignored when computing the height of #container.
To fix this, add a clearfix inside #content but after any other content. For example:
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both }
You can see it working here: http://jsfiddle.net/Mzxjs/
Please can you check this example website. if I read the code well (just had a sight) it's setup with tables with some javascript so that a centered container can always stay at the center, and that the body has got two fluid color backgrounds which expands according to the screen size.
I was attempting to reproduce something like this but just using css, I am quite sure I could but can't figure how. please could you give me some indication/document to read.
i have designed a simple structure here in Jsfiddle,have a look
MARK-UP::
<div class="wrapper">
<div class="head_wrapper">
<div class="left_head">left</div>
<div class="right_head">right</div>
</div>
<div class="body_wrapper">
<div class="left_body">left</div>
<div class="right_body">right</div>
</div>
</div>
CSS ::
.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}
You're just asking for horizontal centering, on a fixed-width container. This is easily done entirely in CSS. Simply set for your container (the element that wraps around your entire site):
.container {
width: 800px;
margin: 0 auto;
}
The "auto" will automatically even out the left and right margins (with no margin on top and bottom.)
[Edit: oops forgot a bit]
As for the blocks of colour, you can achieve this with a background image on your element, that's 1px wide and however tall you need. Just set it to repeat-x.
If your two sections have the possibility of having different heights, you can break it up, so that:
One container is full-width, and has the background colour. An inner container will then be fixed-width with auto margins as above;
Another container is full-width, and has the lighter background colour. An inner container will then be fixed-width with auto margins as above.
This means your code will be something like:
<div class="headercontainer">
<div class="header> This is my header </div>
</div>
<div class="maincontainer">
<div class="main"> This is rest of my copy. </div>
</div>
And your CSS:
.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header,
.maincontainer .main { width: 800px;
margin: 0 auto; }
HTH :)
I've been trying to make a page which contains a column of 330px width at left and then an other column of 670px max-width that is centered at the remaining width of the page. Of course if screen width is too small to fit 1000px, the second column will be resized. How do I do that?
This is my current CSS Code:
#left {
float:left;
width:330px;
}
#right {
???
}
You can easily do this without calc or other nasty overly modern hacking. The following should even work fine in IE7, not sure about IE6 and its respect for margin:0 auto in nested elements but could even work:
HTML
<div id="layout">
<div id="leftcolumn">
Test
</div>
<div id="remainder">
<div id="rightcolumn">
Test
</div>
</div>
</div>
CSS
div {
color:white;
height:400px;
text-align:center;
}
#leftcolumn {
background:red;
float:left;
width:120px;
}
#remainder {
margin-left:120px;
}
#rightcolumn {
width:100%;
margin:0 auto;
max-width:300px;
background:green;
}
Fiddle supplied.