How do I do the css for this? - css

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

Related

How do I get the child div which is inside the parent div, go on the first line of the div?

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 ?

Align text vertically in Div

I have some html in the following structure:
<div class="input-control">
<div class="label-wrapper"></div>
<div class="input-wrapper"></div>
</div>
And CSS:
.input-control
{
height:40px;
overflow:hidden;
width:100%
}
.label-wrapper,
.input-wrapper
{
display:inline-block;
margin-right:-3px;
vertical-align:middle;
}
.label-wrapper
{
width:160px;
}
All is good - as you the text in the label-wrapper class is vertically centered.
However, what I want to do is make it so that label-wrapper and input-wrapper are floated, left and right respectively.
When I apply a float, I then lose the vertical alignment of the text.
I've tried loads of permutations - anyone know how to achieve this?
Good
The more clean solution would be this: http://jsfiddle.net/es4Ca/ i think.
.input-control
{
padding: 20px 0px;
overflow:hidden;
width:100%
}
.label-wrapper,
.input-wrapper
{
display:inline-block;
vertical-align:middle;
}
.label-wrapper
{
width:160px;
}
.input-wrapper
{
width: calc(100% - 164px);
text-align: right;
}
Complicated and not so clean
Here is one overly complicated solution: http://jsfiddle.net/jHd3J/3/
.input-control
{
overflow:hidden;
display: table;
width: 100%;
/*change this...*/
height: 300px;
}
.inner-input
{
vertical-align: middle;
display: table-cell;
width: 100%;
}
.input-wrapper
{
margin-left: 160px;
width: calc(100% - 160px);
text-align: right;
}
.label-wrapper
{
width:160px;
float: left;
}
With this HTML:
<div class="input-control">
<div class="inner-input">
<div class="label-wrapper">
<label>Hahah</label>
</div>
<div class="input-wrapper">
<input type="text" />
</div>
</div>
</div>

Complex CSS positioning

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%; }

div layout as columns

i have the following code:
see in http://jsfiddle.net/bniya_dev/SYPNC/2/
<div>
<div id="mainHeader">
<div id="details1">
<span>details1</span>
</div>
<div id="details2">
<span>details2</span>
</div>
</div>
<div id="header">
<span>header </span>
</div>
</div>
css
div#details1
{
float:left; width:100px;
}
div#details2
{
float:right;
}
I want it to look like the following picture:
What style I should set?
I want it to work in all browsers even mobile browsers
http://jsfiddle.net/bniya_dev/SYPNC/2/
Try this:
You need to clear floats before header.
.clr{clear:both;}
DEMO
* {
margin: 0;
font-family: Arial ;
font-size: 35px;
line-height: 65px;
}
div#mainHeader {
width: 777px;
height: 65px;
background-color: aqua;
text-align: right;
}
div#details1 {
width: 620px;
height: 65px;
background-color: #ED1C24;
float: left;
}
div#details2 {
width: 157px;
height: 65px;
background-color: #22B14C;
float: left;
text-align: center;
}
div#header {
text-align: left;
}
This is the Demo
Maybe you should change the font by yourself (*^__^*)...
Try this one:
http://jsfiddle.net/SYPNC/9/
This should match your requirements. You can still adjust the width of your header1/header2
Give width for below in percentage according to your requirement
div#details1
{
float:left; width:90%;
}
Your html,css both should be change like bellow
HTML
<div id="details1"> <span>details1</span>
</div>
<div id="details2"> <span>details2</span>
</div>
<div id="header"> <span>header </span>
</div>
CSS
body{
width:500px;
}
#details1 {
float:left;
width:300px;
height:50px;
background-color:red;
}
#details2 {
float:right;
width:200px;
height:50px;
background-color:green;
}
DEMO
Try this:
div#details1
{
float:left;
background: red;
width: 90%;
text-align: right;
}
div#details2
{
float:right;
background: green;
width: 10%;
}
#header{
clear: both;
}
demo
But better way to markup like this.....
<div id="mainHeader">
<div id="details">
<span class="one">detail1</span>
<span class="two">detail2</span>
</div>
Then you can float: right; to #details

Absolute positioning in FF

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;
}

Resources