I want to achieve this positioning using CSS :
But the best I obtain after days of tries is this :
Can you help me to achieve that positioning, taking into account :
the red comments in the "try" picture (see JSFiddle below) indicating some major constraints
that the positioning should work on IE8+, FF10+, Chrome, Opera, Safari (using CSSPie and selectivizr for IE8 compatibility)
Here is the JSFiddle and the code :
HTML
<body>body (all divs may have some padding, some margin and some border. All divs adjust their height to their content.)
<div id="globalcontainer"><span class="important">#globalcontainer (fixed width, not really centered into body : see center)</span>
<div id="header">#header (100%)</div>
<div id="middle">#middle (100%)
<div id="left">
<span class="important">#left (on the left of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right)</span>
<br>
<DIV class="bloc" style="width:300px;">bloc</div>
<DIV class="bloc" style="width:50px;">bloc</div>
<DIV class="bloc" style="width:500px;">bloc</div>
</div>
<div id="center"><span class="important">#center (width adjusted to globalcontainer size - left size - right size, with a fixed min-width.<br>
<br>
Stays centered on the screen whatever the left or right size are<br>
--> if left or right divs are not present in the HTML (or present with display:none), center div stays on the center of the screen)</span>
<div id="center-middlerow">#center-middlerow (100%)
<div id="pageReceiver">#pageReceiver (100%)
<div id="page">#page (100%)<br>
<div id="pageHeader">#pageHeader (100%)</div>
<div id="pageContent">#pageContent (100%)</div>
</div>
<div id="tip" style="display: block;">#tip (under page)</div>
</div>
<div style="text-align:center" id="center-bottomrow">#center-bottomrow (100%)</div>
</div>
<div id="right"><span class="important">#right (on the right of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right )</span>
<br>
<DIV class="bloc" style="width:30px;">bloc</div>
<DIV class="bloc" style="width:60px;">bloc</div>
<DIV class="bloc" style="width:90px;">bloc</div>
</div>
</div>
</div>
<div id="footer">#footer (100%)</div>
</div>
</body>
CSS
* {
font-family:Arial;
font-size:11px;
border:1px solid black;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color:rgba(125,125,125,0.1);
}
span {
border:0px;
padding:0px;
background-color:transparent;
}
span.important {
color:red;
font-weight:bold;
}
html {
border:0px;
padding:0px;
background-color:white;
}
/* Real CSS starting here */
BODY {
padding:20px;
padding-bottom:0px;
}
#globalcontainer, #left, #center, #right , #header, #footer {
margin:auto;
background-color:transparent;
display:table;
}
/* ====================================================== */
#globalcontainer {
min-width:1130px;
max-width:1130px;
width:100%;
vertical-align:top;
}
#header {
margin-bottom:10px;
vertical-align:top;
width:100%;
}
#middle {
display: table;
vertical-align:top;
}
#footer {
margin-top:10px;
vertical-align:top;
text-align:center;
width:100%;
}
/* ====================================================== */
#left {
vertical-align:top;
float:left;
padding-right:20px;
}
#center {
vertical-align:top;
display: table-cell;
width:100%;
}
#center-toprow {
padding:10px;
padding-top:0px;
}
#center-middlerow {
}
#center-bottomrow {
padding:5px;
margin-top:30px;
}
#right {
vertical-align:top;
float:right;
padding-left:20px;
}
#left DIV.bloc {
float:right;
white-space:nowrap;
}
#right DIV.bloc {
float:left;
white-space:nowrap;
}
/* ====================================================== */
#pageReceiver {
margin:auto;
width:100%;
}
#page {
cursor:default;
background-color:#F8F8F8;
border:1px solid black;
padding:20px;
width:100%;
position:relative;
min-height:591px;
}
#pageHeader {
margin:auto;
margin-bottom:15px;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
}
#tip {
margin-top:5px;
margin-left:20px;
margin-right:20px;
padding:5px;
background-color:transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
Going with the border-box box model is the right way to go.
Here is a structure I often use : demo
It uses some wrapper divs with position: relative; and custom padding, containing absolutely positioned elements with height: 100%; and overflow :auto;.
It needs tweaking but you'll get the gist.
HTML
<div id="globalcontainer">
<div id="global-wrapper">
<div id="header"></div>
<div id="middle">
<div id="middle-wrapper">
<div id="left">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
</div>
<div id="center-wrapper">
<div id="center">
<div id="center-middlerow"></div>
<div id="center-bottomrow"></div>
</div>
</div>
<div id="right">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
CSS
*,
*:before,
*:after{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div{
border: 1px solid black;
padding: 10px;
}
html,
body{
height: 100%;
}
#globalcontainer{
height: 100%;
}
#global-wrapper{
padding: 100px 10px;
position: relative;
border: none;
height: 100%;
}
#header,
#footer{
position: absolute;
width: 100%;
height: 100px;
left: 0;
}
#header{
top: 0;
}
#middle{
height: 100%;
}
#middle-wrapper{
position: relative;
padding: 0px 200px;
border: none;
height: 100%;
}
#left,
#right{
position: absolute;
width: 200px;
height: 100%;
top: 0;
background:#F0F0F0;
overflow: auto;
}
#left{
left: 0;
}
#right{
right: 0;
}
#center{
height: 100%;
}
#center-wrapper{
border: none;
padding: 0px 10px;
height: 100%;
}
.block{
background: #fff;
}
For such a complex layout, along with border-box you also will need to carefully tweak the dimensions for the desired look.
Check this fiddle: http://jsfiddle.net/SXJuT/ (hope it looks like your screenshot)
Full screen: http://jsfiddle.net/SXJuT/embedded/result/
CSS:
html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-size: 9px; }
div { border: 1px solid blue; box-sizing: border-box; padding: 2px; margin: 4px; }
#globalcontainer { width: 99%; height: 98%; background-color: #deebf7; }
#header { height: 5%; background-color: #d1e4f3; }
#middle { height: 86%; background-color: #d1e4f3; display: table; border-spacing: 4px; width: 99%; }
#footer { height: 5%; background-color: #d1e4f3; }
#left, #center, #right { display: table-cell; background-color: #c4ddf1; }
#left { width: 14%; }
#center { width: 68%; }
#right { width: 14%; }
#center-middlerow { height: 80%; background-color: #bad5eb; }
#center-bottomrow { height: 20%; background-color: #bad5eb; }
#pageReceiver { height: 78%; background-color: #b1d0ec; }
#tip { height: 16%; background-color: #b1d0ec; }
#page { height: 95%; background-color: #a7cbe9; }
#pageHeader { height: 14%; background-color: #2e75b5; }
#pageContent { height: 62%; background-color: #2e75b5; }
#pageFooter { height: 14%; background-color: #2e75b5; }
.bloc { height: 20%; background-color: #2e75b5; }
#left > .bloc:nth-child(1), #right > .bloc:nth-child(1) { width: 50%; }
#left > .bloc:nth-child(2), #right > .bloc:nth-child(2) { width: 70%; }
Related
How do I get the child div which is inside the parent div, go on the first line of the div?
See the picture for what I mean:
div
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
.parentDiv
{
position: relative;
/*...*/
}
.childDiv
{
position: absolute;
/*...*/
}
Basicly that's the CSS. Read more
like this?
#parent {
background-color: #aaaaaa;
height:300px;
}
#child {
background-color: #ff0000;
width:220px;
margin-left:10px;
}
#two {
background-color: #00ff00;
width:100px;
}
.kids {
display: inline-block;
padding: 2px;
white-space: normal;
}
<div id="parent" style="width: 250px; display: inline-block; white-space: nowrap">
<div id="child" class="kids">
<span>child</span>
</div>
</div>
IF you want to look like in your img just do this :
.parent {
height:300px;
width:300px;
background-color:orange;
}
.child {
height:50px;
width:80%;
background-color:green;
margin:0 auto;
}
<div class="parent">
<div class="child">
</div>
</div>
i am VERY curious to see why the downvote ? anyone ?
I´ve got a problem with position:absolute in FF. I´ve got a bar with a width of 100% and two bars with a static width on the left and right side.
I need to do set the inner Bar to 100% to make it responsive. It looks bad when I give percentage-values to the borders.
In Chrome and even IE!!! it´s working fine but Firefox adds both short bars to the right side (like on the picture).
HTML:
<div id="wrapper">
<div class="row-fluid">
<div class="span12">
<div id="slider">
<button class="scrllbtn">〈</button>
<div id="sliderFrame">
<div id="innerSlider">
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
</div>
</div>
<button class="scrllbtn">〉</button>
</div>
<div id="videos"></div>
</div>
</div>
</div>
Styles:
#wrapper
{
width: 960px;
margin: 0 auto;
border: solid 1px red;
}
#slider {
padding-top: 0.4em;
clear:left;
width:100%;
height: 160px;
display:block;
}
#sliderFrame {
width:100%;
height:160px;
overflow-x: hidden;
overflow-y:hidden;
float:left;
border-top: solid 1px #043860;
border-bottom: solid 1px #043860;
}
#innerSlider {
width:950px;
height:200px;
clear:none;
}
.scrllbtn {
position: absolute;
height:162px;
width: 20px;
}
.scrllbtn:first-child {
clear:left !important;
}
.scrllbtn:last-child {
margin-left: -20px;
float:right;
}
.scrllbtn:focus {
outline: none;
}
.videoButton {
float:left;
width:200px;
height:160px;
}
Fiddle
Any suggestetions how I could solve that problem?
somthing like this :)
demo
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
.main {
position: absolute;
width: 100%;
height: 500px;
background: red;
}
.right {
position: absolute;
top: 0;
right: 0;
background: orange;
width: 100px;
height: 500px;
}
.left {
position: absolute;
top: 0;
left: 0;
background: gray;
width: 100px;
height: 500px;
}
Adding the following rule makes it work in my copy of Firefox:
.scrllbtn:first-child {
left: 0;
}
Fiddle
fix problem in your example :)
demo
<button class="scrllbtn scrllbtnleft">〈</button>
<button class="scrllbtn scrllbtnright">〉</button>
.scrllbtnleft {
left: 0;
}
.scrllbtnright {
right: 0;
}
How can I get <div id="green_bar"> to overlap <div id="top_header"> and stop at the left edge of the logo? I'm trying to get the green bar to expand to the left when the screen width is expanded, but I want it to stop at the left edge of the logo.
I've tried position: absolute; on #green_bar but it expands it 100% across the screen.
JSFiddle: http://jsfiddle.net/hfgQt/14/
HTML:
<div id="header_bar"></div><!-- Grey line on top -->
<div id="top_header"><!-- begin top header -->
<div id="green_bar"></div>
<div class="wrap">
<div id="logo">
<a><h1>info</h1></a>
</div>
</div>
</div><!-- end top header -->
CSS
.wrap {
margin:0px auto;
width:960px;
}
#header_bar {
background-color: #424243;
height: 25px;
}
#top_header {
padding:0px 0px;
background-color:#24303d;
background-image:url("http://i.imgur.com/kGjGG.png");
border-bottom:1px solid rgba(0,0,0,.4);
overflow:hidden;
}
#green_bar {
display: block;
height: 10px;
width: 100%;
background-color: green;
}
#logo {
float:left;
clear:both;
}
#logo h1 {
margin:0px;
padding:0px;
background:url(../images/logo.png) no-repeat;
text-indent:-9999px;
width:258px;
height:56px;
}
Try the snippet below.
As I understand your problem, the trick is to get something that is half of (browser width - 960px). That's the amount of the left margin. I used an extra wrapper div to cut out the fixed width (should be 960px, but I changed it to 480px to get it to look OK in jsfiddle). It's position: absolute to get it out of the flow. Then the inner div (#green_bar) simply has width: 50% to cut it down to half the width of both margins put together - the width of the left margin only.
It's hard to understand what you want, so I might have done the wrong thing. Let me know if you need any more help.
header {
padding-bottom:5px;
margin-bottom:35px;
background:#ffdf85;
border-bottom:1px solid #d4d4d4;
background-color:#ffdf85;
}
.wrap {
margin:0px auto;
width:480px;
background: rgba(128, 128, 0, .5);
overflow: hidden;
}
#header_bar {
background-color: #424243;
height: 25px;
}
#top_header {
padding:0px 0px;
background-color:#24303d;
background-image:url("http://i.imgur.com/kGjGG.png") no-repeat;
border-bottom:1px solid rgba(0,0,0,.4);
overflow:hidden;
position: relative;
}
#green_bar_wrapper {
position: absolute;
padding-right: 480px;
left: 0;
right: 0;
top: 0;
}
#green_bar {
width: 50%;
height: 10px;
background-color: green;
}
/* 3.0.0 Logo
----------------------------------------*/
#logo {
float:left;
clear:both;
}
#logo h1 {
margin:0px;
padding:0px;
background:url(http://i.imgur.com/kGjGG.png) no-repeat;
width:258px;
height:56px;
}
#logo h1 span {
text-indent: -9999px;
}
<header><!-- BEGIN HEADER -->
<div id="header_bar"></div><!-- Grey line on top -->
<div id="top_header"><!-- begin top header -->
<div id="green_bar_wrapper"><div id="green_bar"></div></div>
<div class="wrap">
<div id="logo">
<h1><a><span>info</span></a></h1>
</div>
</div>
</div><!-- end top header -->
</header><!-- END HEADER -->
I am new to css and this has me stumped.
How do I get the parent div to always contain its children? As soon as I start using floats for alignment the parent stops containing children.
I actually do not want to float things. I want to align them. How do we do alignments and margins in css and not yet hardcode all dimensions?
Can someone kindly profive the css for this? Lets assume for the sake of this example that the total width is 960px and all margins are 15px;
Three alternatives:
Set clear: both on the green element.
Set overflow: hidden on the parent container.
Use clearfix on the parent container.
Let's see a clear and flexible version:
#container { background: gray; overflow: hidden; padding: 15px; }
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; }
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 }
#footer { background: green; height: 50px; clear: left; }
Even the width and height you see set is unnecessary, boxes can adjust to their content when omitted, I just added them for demo purposes.
jsFiddle Demo
overflow: hidden affecting layout
Chris Coyier: All About Floats
Check this out: http://jsfiddle.net/kMQbt/
Html:
<div id="parent">
<div id="purple">
purple
</div>
<div id="blue">
blue
</div>
<div id="green">
green
</div>
</div>
Css:
#parent{
width: 960px;
background-color: grey;
float:none;
padding-bottom: 15px;
}
#purple{
width: 200px;
height: 200px;
float:left;
margin-top: 15px;
margin-left: 15px;
background-color: purple;
}
#green{
width: 930px;
height: 200px;
background-color: green;
clear: both;
margin-left: 15px;
}
#blue{
width: 715px;
float:left;
height: 300px;
margin: 15px;
background-color: blue;
}
Use clearfix and assign the class to your container is one of the way to fix your problem.
/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
<div id="container">
<div id="main">
<div id="main_left"></div>
<div id="main_right"></div>
</div>
<div id="last"></div>
</div>
css
#container
{
width:xx;
height:xx;
background:
}
#main
{
width:xx;
height:xx;
}
#main_left{
float:left;
width:xx;
height:xx;
}
#main_right
{
float:right
width:xx;
height:xx;
}
#last
{
clear:both;
width:xx;
height:xx;
}
demo http://jsfiddle.net/yTUU6/
HTML
<div id="contaner">
<div id="top_left">
left box
</div>
<div id="top_right">
right box<br />
height will be changed <br />
<br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br />
</div>
<div class="clear"></div>
<div id="bottom"></div>
</div>
CSS
#contaner{
width: 100%;
height: 400px;
background: #EEEEEE;
}
#top_left{
width: 30%;
border:solid 1px;
height: 200px;
float:left;
}
#top_right{
width:69%;
float:left;
border:solid 1px red;
}
.clear{
clear: both;
}
#bottom{
height: 100px;
border: solid 1px green;
}
The classic way (how i learned to do it) using a clearer element in between
CSS
.clearer{
clear:both;
}
#parent{
width:500px;
background-color:#343434;
padding:10px;
color:#fff;
}
#box{
width:50px;
height:50px;
margin:10px;
float:left;
background-color:#545454;
}
#variable{
width:400px;
float:left;
}
#footer{
height:40px;
margin-top:30px;
background-color:#646464;
}
HTML
<div id="parent">
<div id="box"></div>
<div id="variable">
</div>
<div class="clearer"></div>
<div id="footer"></div>
</div>
An example here
Hope this helps
jsFiddle:
How do I make div2 + Button2 fill the rest of the window width if I use pixel metric on column 1 and 3?
I'll use that to format a form making a textbox to change the size as two other fields are fixed.
Thank you.
CSS
td { border:solid 1px #000; float:left; }
#div1 { width:100px; border:solid 1px #000; float:left; }
#div2 { border:solid 1px #000; float:left; }
#div3 { width:100px; border:solid 1px #000; float:right; }
#Button1 { width:100% }
#Button2 { width:100% }
#Button3 { width:100% }
HTML
<div id="div1">
<button id="Button1">Button 1</button>
</div>
<div id="div2">
<button id="Button2">Button 2</button>
</div>
<div id="div3">
<button id="Button3">Button 3</button>
</div>
Another solution is moving the second DIV to the bottom and applying margins on it without float: http://jsfiddle.net/xC7uZ/6/
As far as I know, there are only two ways of doing this:
Using tables - most people do not like this idea. I for one, think it's fine for overall layout as long as you don't go overboard with nested tables and stuff. Kalle's answer covers this option
Using absolute positioning specifying all four corners. I only recently discovered this method and it works beautifully. It works in all major browsers.
Something like this:
#div1 { position:absolute; left: 0px; width: 100px; border:solid 1px #000; }
#div2 { position:absolute; left: 100px; right: 100px; border:solid 1px #000; }
#div3 { position:absolute; right: 0px; width:100px; border:solid 1px #000; float:right; }
Here is one to make you guys think :)
<div class="maincontainer">
<div class="column01">
<div class="restraint">
<p>Left column</p>
</div>
</div>
<div class="column03">
<div class="restraint">
<p>Right column</p>
</div>
</div>
<div class="column02">
<div class="restraint">
<p>Middle column</p>
</div>
</div>
</div>
and the CSS:
.maincontainer {
position:relative;
overflow:hidden;
}
.maincontainer .column01 {
float:left;
}
.maincontainer .column01 .restraint,.maincontainer .column03 .restraint {
width:200px;
}
.maincontainer .column03 {
float:right;
}
.maincontainer .column02 {
overflow:hidden;
}
.maincontainer .column02 .restraint {
width:100%;
}
* html .maincontainer .column02 {
display:inline-block;
}
I will get hammered for using <table>, but this is the most flexible and crossbrowser method. It works in ie5 ^^
http://jsfiddle.net/hobobne/24urb/
En este ejemplo vemos como poner tres columnas, de las cuales, dos tienen tamaño fijo.
Three columns and one column with 100% and two columns with fixed width.
jsfiddle
CSS
div, span, label, li, ul
{
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cabecera
{
top:0px;
left:0px;
width:100%;
height: 100px;
display: table;
position: absolute;
border:1px solid orange;
}
.row
{
width:100%;
display: table-row;
}
.column_izq
{
width:60px;
height:100%;
display: table-cell;
white-space: nowrap;
vertical-align: middle;
border:1px solid black;
}
.column_izq .icono
{
width: 100%;
text-align: center;
border:1px solid red;
}
.column_center
{
width: 100%;
min-width:60px;
text-align:center;
display: table-cell;
vertical-align: middle;
border:1px solid black;
}
.column_der
{
width:60px;
height:100%;
display: table-cell;
white-space: nowrap;
vertical-align: middle;
border:1px solid black;
}
.column_der .logo
{
width: 100%;
text-align: center;
border:1px solid red;
}