i have 3 divs conatined within an outer div. i am aligning them horizontally by floating them left. and div3 as float right
<div id="outer">
<div id="div1">always shows</div>
<div id="div2">always shows</div>
<div id="div3">sometimes shows</div>
</div>
div1 and div3 have fixed sizes.
if div3 is left out i want div 2 to fill up the remaining space. how can i do it?
What about something like this? https://jsfiddle.net/Siculus/9vs5nzy2/
CSS:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#right{
float:right;
width:50px;
background:yellow;
}
#left{
float:left;
width:50px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Body:
<div id="container">
<div id="right">div3</div>
<div id="left">div1</div>
<div id="remaining">div2, remaining</div>
</div>
This is a technique using display: table; https://jsfiddle.net/sxk509x2/
Browser support (ie 11+): http://caniuse.com/#feat=css-table
HTML
<div class="outer">
<div class="static pretty pretty-extended">$</div>
<input class="dynamic pretty" type="number" />
<div class="static pretty">.00</div>
</div>
CSS
.outer{
width:300px;
height:34px;
display:table;
position: relative;
box-sizing: border-box;
}
.static{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
}
.dynamic{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
width: 100%;
height:100%;
}
.pretty{
border: 1px solid #ccc;
padding-left: 7px;
padding-right: 7px;
font-size:16px;
}
.pretty-extended{
background: #eee;
text-align:center;
}
The classes that contain "pretty" are not required to accomplish what you are trying to do. I just added them for appearances.
You don't need to float #div2, it'll automatically fill up the remaining space.
If you want borders/padding, you ought to give #div2 a child element.
Related
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
i want to set .span4(image) and .span8(green box) to the bottom of .row (grey box)
.row should get the size automatic because .span8 has a random height.
what i want is this result:
what i get is this:
example 1
here is .span8 not on bottom of .row but .row has a automatic height
http://jsfiddle.net/39znd/
example 2
here is .span8 on bottom of .row but .span8 is not inside of .row as you can see on post 2 and 3
http://jsfiddle.net/HZu82/
on example 2 i added to .span8 blockquote -> position:absolute;
does anyone have a hint for me?
You can use display:table;on the wrapper and display:table-cell;, vertical-align:bottom;
for your issue see this demo :
FIDDLE
HTML :
<div id="container">
<div class="table">
<div class="row clearfix">
<div class="span4">
<img src="http://lorempixel.com/290/270/people/9/" />
</div>
<div class="span8_wrap">
<div class="span8">
<blockquote class="bubble1-left">
<p>This is a blockquote</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
CSS :
#container{
width:900px; /* TOTAL WIDTH */
margin:0 auto;
padding:0 40px;
position:relative
}
.table{
display:table;
}
.row{
display:table-row;
margin:0 0 20px 0;
min-height:270px;
background:grey;
}
.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both}
.clearfix{zoom:1}
.span4{
display:table-cell;
vertical-align:bottom;
width:300px; /* IMG BOX */
background:grey;
}
.span4 img{
display:block;
}
.span8_wrap{
display:table-cell;
vertical-align:bottom;
}
.span8{
padding-bottom:30px;
width:600px; /* TEXT BOX */
background:green;
}
blockquote{margin:0 0 30px 0}
blockquote p{margin:0;font-size:1.25em}
.bubble1-left{
position:relative;
padding:20px;
border:3px solid #000;
text-align:center;
color:#000;
background:#fff;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
To have empty space above the green div try next things:
Insert some div to this empty place and let the green div have something like 100px height, and the div above 100% height.
Use next styles for green div: position: absolute; left: 0px; bottom: 0px; right: 0px;
This is the layout i want,
I made some with code, but i'm not sure how to do after this.
[html]
<div id="content">
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
[css]
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50px;
}
#right{
float:left;
width: 50px;
}
#bottom{
/*what do i have to do in here?
float:*/
}
You could do something like this:
Set clear:both on #bottom. Add width:50% to both #left/#right.
Finally, specify the borders on the elements and add box-sizing in order to include the borders in the element's width calculations.
jsFiddle example
#content {
border:1px solid black;
}
#content > div {
height:100px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#left {
float:left;
width: 50%;
border-right:1px solid black;
}
#right {
float:right;
width: 50%;
}
#bottom {
border-top:1px solid black;
clear: both;
}
This is what you want for the bottom div:
#bottom{
clear: both;
}
For #bottom, you want float:left;width:100px; Just try that, see if it works.
You could also try using positions to do it, if you don't need the size of them to change:which it looks like you don't. For example:
#Left {width:50px;height:50px;position:absolute;left:0px;top:0px;}
#Right {width:50px;height:50px;position:absolute;left:50px;top:0px;}
#Bottom {width:100px;position:absolute;left:0px;top:50px;}
I feel much more confident the second will work.
Here is how I would do it personally: http://jsfiddle.net/T5fW3/
<div id="content">
<div id="top">
<div id="left">
<div class="container"> Left </div>
</div>
<div id="right">
<div class="container"> Right </div>
</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
I use a container so that if you want to add styles (border, margins, padding etc) they don't mess up the 50%. You can now resize content to whatever size and your proportions will still be the same.
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50%;
}
#right{
float:left;
width: 50%;
}
#bottom{
border: 1px solid black;
clear: both;
}
.container {
border: 1px solid black;
}
the border in the container class and bottom id is there just for illustration. If you were to add the border to #left or #right your layout will break. Notice also, I use 50% instead of 50px.
I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them:
HTML
<div id="outer">
<div id="left">
...
<div id="right">
</div>
CSS
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
}
#left{
float:left;
}
#right{
width:500px;
float:right;
}
However, the outer div registers a height of 0px and so the border doesn't go around the other divs. How do I make the outer div recognize the heights of the things inside it?
It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.
You can use the overflow style to make the parent element take the floating elements in consideration:
#outer { overflow: auto; }
There are a couple of solutions to this issue:
#outer: overflow: hidden;
or add some non-displaying content to the outer div that comes after the floated divs that you then add a clear: both style rule to.
You can also add, through css, the :after pseudo-element to insert content after those divs that you then apply clear: both to - this has the advantage of not requiring extra markup.
My preference is the first one.
Try this:
<div id="outer">
<div id="left">
...
<div id="right">
<div style="clear:both"></div>
</div>
add overflow: hidden; to the main div.
<style type="text/css">
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
overflow: hidden;
border: 1px solid green;
}
#left{
float:left;
border: 1px solid red;
}
#right{
width:500px;
float:right;
border: 1px solid yellow;
}
</style>
You could clear the float by inserting an element after the floated elements that has a clear property applied to it because floated child elements cause the parent to have 0 height since they don't take the height of the floated children into consideration.
<div id="outer">
<div id="left">
...
<div id="right">
<div class="clear"></div>
</div>
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
}
#left{
float:left;
}
#right{
width:500px;
float:right;
}
.clear{ clear: both; }
You must also float the outer div.
Div's that contain floatet divs and that are not floated themselves collapse.
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
float:left;
}
#left{
float:left;
width:300px;
}
#right{
width:500px;
float:right;
}
How bout like this:
<style type="text/css">
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
border:thin solid #000000;
height:300px;
margin:5px;
padding:10px;
}
#left{
float:left;
border:thin dashed #000000;
width:385px;
height:100px;
margin:5px;
}
#right{
width:385px;
float:left;
border:thin dashed #000000;
height:100px;
margin:5px;
}
</style>
<div id="outer">
<div id="left">
</div>
...
<div id="right">
</div>
</div>
if div inside a parent is floated it is no longer part of parent div:check it by inspecting parent element.no to fix your problem there are two methods:
1)make a empty div at end inside parent class it as .blank all following css
.blank:after{
content: "";
clear:both;
display:block;
}
Or
2) give parent a class .clear-fix and add css
.clearfix:after {
content: "";
clear: both;
display: block;
}
it will give parent a height equal to contents