I need to do with html and css such layout:
left width is static for 250px
right is fluid, for other rest of screen (100%-250px)
I try so(i'm using sass):
.wrapper{
width:100%;
margin: 0 auto;
.left{
width:250px;
float:left;
}
.right{
float:right;
width:100%;
margin-left: 250px;
}
}
So how can i solve this problem?
This is pretty simple to do: http://jsfiddle.net/joplomacedo/ExHzk/
If you can't see the fiddle, here's the html and css.
HTML:
<div class="fixed"></div>
<div class="fluid"></div>
CSS:
.fixed {
float: left;
width: 250px;
}
.fluid {
margin-left: 250px;
}
Aside
I left out the wrapper. It's not really relevant for the demonstration. One question though: If you're giving the wrapper a width of 100%, what's the margin: 0 auto for? And do you really need to specify the width?
Try this code if I have understand well:
.wrapper{
width:100%;
margin: 0 auto;
.left{
width:250px;
float:left;
}
.right{
float:right;
width:100%;
margin-right: 250px;
}
}
You could just remove the float:right on the .right like:
right{
width:100%;
margin-left: 250px;
}
http://jsfiddle.net/RfHqX/
Notice that I didn't use SASS-style.
use margin not float for right div
.wrapper{
width:100%;
margin: 0 auto;
}
.left{
width:250px;
height:100%;
float:left;
background:#f00;
}
.right{
height:100%;
margin-left: 250px;
background:#0f0;
}
DEMO
Related
I'm having a small issue with my html layout .
When i have content - it works properly :
http://jsfiddle.net/exqofLft/
but when i have no content . the "wrap" height becomes 0 and the header and footer comes together.
e.g : http://jsfiddle.net/aqgo9370/
When there is no content or little content . i want the header at the top , followed by the full size wrap and the footer at the bottom of the page.
Any ideas how to do this ?
e.g :
CSS :
html, body
{
height:auto;
background-color:grey;
position:relative;
margin:0;
}
#header
{
position:absolute;
width:auto;
min-width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:auto;
min-width:100%;
height:auto;
background-color:blue;
margin:75px 0 0 0;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
}
By using vw/vh we can size elements to be relative to the size of the viewport. Add the below code in this id #wrap{}, Demo
min-height: 100vh;
You could use jquery for this.
var headerH = $('#header').height();
var footerH = $('footer').height();
var windowH = $(window).height();
$('#wrap').css({
'minHeight': (windowH - (headerH + footerH)) + 'px'
});
I made some changes in your html/css though.
Check the fiddle:
http://jsfiddle.net/skeurentjes/aqgo9370/9/
You can use box-sizing:border-box , and give it a padding to bottom , and top corresponding to footer and header respectively :
#header
{
top:0px;
position:relative;
width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:100%;
height:100%;
background-color:blue;
box-sizing: border-box;
padding-top: 75px;
padding-bottom:50px;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
bottom:0px;
}
Example
Js and position is not needed to Do this. Try this, This is Technically called Sticky footer
html, body {
height:100%;
background-color:grey;
margin:0;
}
#content {
float: left;
width: 100%;
min-height: 100%;
padding-bottom: 50px;;/*height of your footer*/
box-sizing: border-box;
}
#header {
width:100%;
height:75px;
background-color:yellow;
}
#wrap {
width:100%;
height:auto;
background-color:blue;
}
footer {
float: left;
width:100%;
height:50px;
background-color:black;
margin-top: -50px;/*height of your footer*/
}
<div id="content">
<div id ="header"></div>
<div id = "wrap"></div>
</div>
<footer></footer>
Use padding-bottom with desired height like
#wrap
{
padding-bottom:100%;/*or 50% or px value like 50px*/
}
html,
body {
height: auto;
background-color: grey;
position: relative;
margin: 0;
}
#header {
position: absolute;
width: auto;
min-width: 100%;
height: 75px;
background-color: yellow;
}
#wrap {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background-color: blue;
margin: 75px 0 0 0;
padding-bottom: 100%;
}
footer {
position: absolute;
width: auto;
min-width: 100%;
height: 50px;
background-color: black;
}
<div id="header">
<div>
<div id="wrap"></div>
<footer></footer>
It's working as it should. Elements always collapse to zero with no content. In order to achieve any height without content, you must assign a height value.
add Minimum height of wrap id
for example :
min-height:500px;
I am new website designer. i would like to create website which is separated in 3 columns, when i zoom out my website with Firefox and Chrome it doesn't has any problems; however, when i zoom out with Safari it has some whitespace between right div and middle. please help me to fix it.
my css script as below:
div#left{
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right{
float: right;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin-top: 0 auto;
white-space:nowrap;
}
My HTML
<div id="content">
<div id="left">
Test
</div>
<div id="middle">
Middle
</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>
How to fixed with safari ?
because the width of the browser has increased your middle is floating left and your right is floating right which cause a white space in the middle.. try making your right float left also
div#right{
float: left;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
but this will leave you a white space on the right side.
you can fix this by making your left middle and right in percent. so that it would adopt the length of its parent.
div#left{
float: left;
width: 25%;
background-color:#F00;
height:200px;
}
div#middle{
float: left;
width: 50%;
background-color:#F00;
height:200px;
}
div#right{
float: left;
width: 25%;
background-color:#F00;
height:200px;
}
Add float:left to right div and correct the classes names.
DEMO
HTML
<div id="hcontent">
<div id="hleft">Test</div>
<div id="middle">Middle</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>
CSS
div#hcontent {
margin: 0 auto;
width:960px;
}
div#hleft {
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle {
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right {
float: left;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
DEMO with width px
DEMO with width %
Your "content" div is not appeared to be in your HTML. If you mean that hcontent == content, then there is a problem with your width. You have width set to 100% to the parent "hcontent" block, and child div's just positioned with float and have width set in px. You need to change your hcontent style to fixed width in px, or change your child div's to width in percent.
You can try something like this:
div#left{
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right{
float: right;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin: auto;
white-space:nowrap;
}
As you can see I've just changed your content width and margin to "auto" so it would be always positioned at the center.
Either way:
div#left{
float: left;
width: 30%;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width:40%;
background-color:#366;
}
div#right{
float: right;
width: 30%;
background-color:#F00;
height:200px;
}
div#content{
width: 100%;
margin: auto;
white-space:nowrap;
}
Note that I've changed all of your div width to percent value.
I did this for you. It may help.
Santy beat me to it. Basically the same thing but with a .clearfix class added to get rid of any other extra whitespace which might appear because of the floating elements.
I'd recommend moving away from pixel units. Try experimenting percentages or something scalable like rem or em units.
HTML
<div id="content">
<div id="left">Left</div>
<div id="middle">Middle</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
<div class="clearfix"></div>
</div>
CSS
#content{
width: 900px;
margin: 0 auto;
white-space:nowrap;
}
#left{
float: left;
width: 200px;
min-height:200px;
background-color:#999;
}
#middle{
float:left;
width: 500px;
min-height: 200px;
background-color:#366;
}
#right{
float: left;
width: 200px;
min-height: 200px;
background-color:#F00;
}
.clearfix{
clear: both;
}
JSFiddle
http://jsfiddle.net/LVLMz/
Use percentage for the widths (20%, 60%, 20%).
div#left{
float: left;
width: 20%;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width: 60%;
background-color:#366;
}
div#right{
float: right;
width: 20%;
background-color:#F00;
height:200px;
}
Fiddle
here it is [tested]
just changed hleft => left and hcontent => content
<style>
div#left{
float: left;
width: 205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width: 555px;
background-color:#366;
}
div#right{
float: left;
width: 200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin: 0 auto;
white-space:nowrap;
}
</style>
<div id="content">
<div id="left">
Test
</div>
<div id="middle">
Middle
</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>
<div id="hleft"> & <div id="hcontent">
should be:
<div id="left"> & <div id="content">
I have two div elements inside a Parent div element with class names .variableHT, .remaining. Here is the html
<div class="parent">
<div class="variableHT">1234</div>
<div class="remaining"></div>
</div>
and here is CSS
.parent{
height:300px;
}
.variableHT{
height:auto;
background-color:green;
}
.remaining{
margin-top:auto;
margin-bottom:0px;
background-color:yellow;
}
I am trying to make two DIVs, first one is auto height element, height is not fixed, it will grow as per the content size. Then next DIV should occupy whatever the space is remaining.
Tried adding margin values but did not workout.
Please help me on this. Here is the fiddle http://jsfiddle.net/GyULa/1/
How about this one:
.parent{
display: table;
height: 300px;
width: 100%;
}
.variableHT{
height: auto;
display: table-row;
background-color: green;
}
.remaining{
height: 100%;
display: table-cell;
background-color: yellow;
}
Here is fiddle link for it
With overflow:hidden on .parent and a height specification on .remaining it works:
.parent{
height:300px;
overflow: hidden;
}
.variableHT{
height:auto;
background-color:green;
}
.remaining{
margin-top:auto;
margin-bottom:0px;
background-color:yellow;
height: 300px;
}
First dirty fix...with "overflow:hidden" ;) But interesting question! Is there a more elegant way?
.parent{
height:300px;
overflow: hidden;
}
.variableHT{
height:auto;
background-color:green;
}
.remaining{
margin-top:auto;
margin-bottom:0px;
background-color:yellow;
height: 100%;
}
Try adding height: 100% to the variableHT:
Demo
.parent{
height:300px;
overflow:hidden;
}
.variableHT{
height:auto;
background-color:green;
}
.remaining{
height: 100%
background-color:yellow;
}
How to create fixed height 1st column layout?
I saw a kevinrose.com blog and i liked it, simple and clean layout, i wanted to use that layout so i was trying to create it but i stuck with this fixed height, i can easily set fixed bar like header, but column, i dont know how to do it
example:
#sidebar
{
background-color: red;
height: 700px;
width: 100px;
float: left;
}
#article
{
background-color: blue;
height: 400px;
width: 200px;
float: left;
}
#like
{
background-color: green;
height: 100px;
width: 200px;
position: fixed;
float: left;
z-index:-5;
}
Use position:fixed on the sidebar, and offset the rest using a margin
#sidebar
{
background-color: red;
width: 100px;
position: fixed;
}
#article
{
background-color: blue;
width: 200px;
margin-left: 100px;
}
Position fixed is how you achieve that. Have a look here: http://jsfiddle.net/wpHMA/
.wrap {
width:100%;
height:100%;
overflow:auto;
position:relative;
}
.sidebar {
background:#333;
color:#fff;
width:25%;
height:100%;
position:fixed;
top:0;
left:0;
}
.content {
width:75%;
float:right;
}
As per your given example "kevinrose.com" left panel is fixed position structure.
You can use following css/html code structure
Css
.leftPan{
width:27%;
background-color:#CCC;
position:fixed;
left:0;
min-height:100%;
}
.rightPan{
margin-left:27%;
height:1000px;
background-color:#999;
}
Html
<div class="leftPan">
Left Panel
</div>
<div class="rightPan">
Right Panel
</div>
here is jsFiddle File
I'm looking for a style which aligns the white box in this fiddle to the center of the screen.
I thought I could use text-align-middle in an outer div-element.
But unfortunately it doesn't work.
I've been trying for hours now and hope you can help me.
Thank you in advance.
Add this to your current CSS :
.abs {
width: 100%;
}
.box {
width: 220px;
margin: auto;
}
.background1{
margin:auto;
background-color:#000000;
min-width:100%;
min-height:500px;
}
.bgcolor {
position:relative;
width:100%;
height:100%;
background-color:#000000;
opacity:0.5;
}
.abs {
display:block;
margin:auto;
width:100%;
height:500px;
}
.box {
margin:auto;
position: relative;
width:220px;
height:80px;
background-color:#ffffff;
border:1px solid grey;
}
.abs{
position: aboslute;
width: 100%;
}
.box{
/*either use*/
width: 220px; /*or larger for fixed width*/
/*or use*/
max-width: 400px; /*or any other size to give it a flexible auto size*/
margin: auto; /* or margin: 0 auto 0 auto;*/
}
Older IE versions don't allow such constructs. In that case you have to add:
.abs{
text-align: center;
}
.box{
text-align: left;
}
For backwards compatibility.