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