I'm trying to create a fluid container comprised of 3 elements. The two on the left and right are a fixed width and are fine. The element in the middle resizes to fill any extra space but seems to run behind the outer elements.
Here is where I'm at so far: (concept taken from here)
HTML
<div class="left"> </div>
<div class="right"> </div>
<div class="middle">
<div class="progress">
This box shouldn't overlap the outer two
</div>
</div>
CSS
.left {
border: 2px solid green;
height:40px;
width:200px;
float: left;
}
.right {
border: 2px solid green;
width:100px;
height:40px;
float: right;
}
.middle {
border: 2px solid red;
width:auto;
height:40px;
}
.progress {
background:yellow;
margin:0px auto;
}
Here is a fiddle to illustrate the problem You'll notice that the yellow box is the full width of the page and not constrained to the center box.
The middle box will end up being a fluid media player progress bar and needs to display at any size (within reason). How can I place more elements inside the middle container and make them have a maximum width of the parent. I don't want to have to rely on JavaScript for this unless I have to, in which case I can write a solution, I was just wondering if there was a CSS solution?
Try adding:
.middle {
padding-left: 200px;
padding-right: 100px;
}
Check it here: http://jsfiddle.net/f6U9p/1/
This will allow the space of the sidebars to be excluded from the width of the middle element.
One way is to use display: table and display:table-cell
HTML:
<div class="container">
<div class="left"> </div>
<div class="middle">
<div class="progress">
This box shouldn't overlap the outer two
</div>
</div>
<div class="right"> </div>
</div>
CSS:
.container {
border: 1px solid #ccc;
display: table;
}
.left,.right {
display: table-cell;
}
.left {
border: 2px solid green;
height:40px;
width:200px;
}
.right {
border: 2px solid green;
width:100px;
height:40px;
}
.middle {
border: 2px solid red;
height:40px;
}
.progress {
background:yellow;
margin:0px auto;
}
Fiddle: http://jsfiddle.net/f6U9p/2/
Add float: left to .middle.
The outer divs are floated, so the yellow box is going behind them.
Related
I have two elements aligned horizontal.
I want the right one to have a dynamic width and the left one to take up as much space as is left. How Do I do that?
Se JSFiddle
or code
<div class="wrapper">
<div style="background:red;" class="one">hello</div>
<div style="background:blue" class="two">dude</div>
</div>
.wrapper > div {
border: 1px yellow solid;
display: table-cell;
height:80px;
}
.one {
width: 100%;
}
.two {
width: 100px;
}
.wrapper {
width:100%;
height:200px;
border:2px solid blue;
}
.right {
height:200px;
width:60%;
background:red;
float:right;
}
.left {
width:auto;
height:200px;
background:green;
}
}
<div class="wrapper">
<div class="right">hello</div>
<div class="left">dude</div>
</div>
You can align two element like div horizontal to each other having right element can be dynamic and left element set his width automatically. To take width automatically you can use width:auto; property for first div. And second div having some width in percent or pixel so first div can take remaining width and set it right using float right property. I have created it with example.
If you change width of right element then width of left element will take remaining width automatically.
you can also take reference
Help with div - make div fit the remaining width
try this..
<div class="wrapper">
<div style="background:red;" class="one">hello</div>
<div style="background:blue" class="two">dude</div>
</div>
.wrapper > div {
border: 1px yellow solid;
display: table-cell;
height:80px;
}
.one {
width: 100%;
}
.two {
width: auto;
}
Here's the image of what I'm trying to achieve for better explanation
What I'm dealing with is:
There are 2 anchor links floating with each other.
The two anchors content or number of words inside of it varies. The
anchor is the next and previous post of my wordpress blog. Please
refer to
http://codex.wordpress.org/Function_Reference/previous_post_link and
and http://codex.wordpress.org/Function_Reference/next_post_link for
reference.
Both have equal size (height and width). The height automatically adjust depending on the content of the other anchor.
There's a border line in the middle.
Text should be vertically and horizontally aligned.
You can see the live example of what I'm trying to copy for better explanation.
Here's my code and fiddle
<div class="holdmetight">
<div class="prev">TITLE OF PREVIOUS POST HERE</div>
<div class="next">TITLE OF NEXT POST HERE</div>
</div>
.holdmetight {width:100%; max-width:1023px; position:relative; display:block; }
.next, .prev { min-height:35px; height:100%; text-align:center; height:100px;}
.prev { display:block; background:#CCC; width: 100% auto; }
.next {float:left; border-right:1px solid #eceff0; background: #AAA;}
Here is a basic layout with display: table.
Benefits of display: table:
Easily vertically center the text with vertical-align: middle
Both divs maintain the same height based on the others content
Have an example!
HTML / CSS
.holdmetight {
display: table;
border: solid 1px #000;
border-top: solid 2px #000;
}
/* the > selector targets direct div children of .holdmetight */
.holdmetight > div {
display: table-cell;
vertical-align: middle;
background: #aaa;
padding: 10px;
text-align: center;
width: 50%;
}
.prev {
border-right: solid 1px #000;
}
<div class="holdmetight">
<div class="prev">
<a href="/">
TITLE OF PREVIOUS POST HERE.
This is a particulary long title
that will push both divs down.
</a>
</div>
<div class="next">
<a href="/">
TITLE OF NEXT POST HERE
</a>
</div>
</div>
DEMO
.holdmetight {width:100%; max-width:1023px; position:relative; display:block; }
.next, .prev { min-height:35px; height:100%; text-align:center; height:100px; display:inline-block;}
.prev { background:#CCC; width: 100% auto; }
.next { border-right:1px solid #eceff0; background: #AAA;}
add padding according to need
I have three divs side by side. If the browser window gets smaller I want that the middle div moves down under the first div and the right div moves to the "middle".
For a better understanding, i made following outline
Can someone please tell me how you'd do this?
This jsfiddle should get you started. I forked Candlejack's fiddle, and tried to provide a css only solution.
Basically you put the 2nd div last:
<section id='container'>
<div id='box-1' class='myBox'>1</div>
<div id='box-3' class='myBox'>3</div>
<div id='box-2' class='myBox'>2</div>
</section>
Then you float left div-1 and div-2 while the div-3 floats right, div-1 and div-3 have display: block; while div-2 display: inline-block;
#container { display:inline-block; width:100%; padding: 0.5em 0; border: 1px solid black;}
.myBox { display:inline-block; min-height: 100px; width:300px; margin: 0.5em 0 0.5em 3%; float:left; display: block; }
#box-1 { border:1px solid blue;}
#box-2 { border:1px solid red; display: inline-block; float: left;}
#box-3 { border:1px solid green;float:right;}
Just a quick trick, however you may need to tweek a bit.
http://jsfiddle.net/bd9yczqq/3/
[ <div><div class="box first"></div>
<div class="box middle"></div>
<div class="box last"></div></div>
.box{
width:200px;
height:200px;
float:left;
border:1px solid #999;
margin:5px 1%;
background-color:#ccc;
}
.middle{
float:right;
}
.last{
background-color:red;
}]
Use relative positioning in your css for your divs and float them. Example:
position:relative;
float:left;
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.
How to create two boxes (floating side by side) of same height.
I want to create boxes of height 40% of the container/window?
See the Example Here
If that is what you are looking for, here is more:
CSS:
#parent{
width:205px;
height:200px;
border:1px solid #000000;
overflow:auto;
}
#child1{
height:40%;
background:#00ff00;
float:left;
}
#child2{
height:40%;
background:#0000ff;
float:left;
}
The Important Points:
The float:left is used to align the two boxes side-by-side
The height is specified in % for both child boxes so that they inherit from their parent.
HTML:
<div id="parent">
<div id="child1">
This is first box
</div>
<div id="child2">
This is second box
</div>
</div>
This should be a simple solution for you. Here's my example:
jsfiddle
HTML:
<div class="wrap">
<div class="left">
Content
</div>
<div class="right">
More content
</div>
</div>
CSS:
.wrap
{
width: 400px;
height: 500px;
border: 1px solid #000;
}
.left, .right
{
float: left;
width: 45%;a
height: 40%;
margin: 2%;
}
.left
{
border: 1px solid #f00;
}
.right
{
border: 1px solid #00f;
}
Using a % as height is relative to your parent container's height. Therefore you need to declare the height of your parent container. Take a look at this tutorial: Equal Height Columns.
The question specifically mentions floating, and there have been several good answers for that, but I thought it might be worth posting an answer that doesn't use floats in case the the mention of floating was accidental:
.wrapper {
width: 400px;
height: 400px;
outline: 1px solid #000;
}
.wrapper div {
display: inline-block;
width: 198px;
height: 40%;
background: #66c;
}
.wrapper div:first-child {
background: #6c6;
}
<div class="wrapper">
<div>This is the first box</div>
<div>This is the second box</div>
<p>Some other content</p>
</div>
It doesn't currently work in WebKit, but I assume that's a bug and there'll be a workaround, I am investigating. If you need it to work in IE < 8 add a conditional comment:
<!--[if lt IE 8]>
<style>
.wrapper div { zoom:1; *display:inline;}
</style>
<![endif]-->