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;
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 a florist by trade, so I was as surprised as you when my floral arrangement knowledge isn't translating to div arrangement html styles. Perhaps you can help.
Here's the html:
<div id="blocks">
<div id="block0"></div>
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
</div>
And here's the style:
div {
outline: solid 1px black;
}
#blocks {
width:80%;
height:500px;
margin:0 auto;
background-color: #ffe;
}
#block0 {
height:10%;
width:100%;
background: red;
float: left;
}
#block1 {
height:10%;
width:25%;
background: orange;
float: left;
}
#block2 {
height:90%;
width:50%;
background: cyan;
float:left;
}
#block3 {
height:45%;
width:25%;
background: yellow;
float: right;
}
#block4 {
height:45%;
width:25%;
background: green;
float: left;
}
#block5 {
height:80%;
width:25%;
background: magenta;
float: left;
}
I'd love for the top of block5 to slide right up against the bottom of block1 and an explanation of its behavior. Thank you.
Here is the fiddle for this
It's going to the bottom beacuse you are floating to the left several elements that are before your block 5. You can remove the float: left to the block 5, set a position: relative and top: 20% (this will place the block 5 20% top relative to the blocks container)
#block5 {
height:80%;
width:25%;
background: magenta;
position: relative;
top: 20%;
}
In another words, block5 is going under because you already used up all the available width space with previous blocks. You can relate this to your job: if you place your flower pots on the edge of your balcony and there's not enough space, the last pot falls on top of someone's head.
To avoid this you can build shelves, made with other divs. Here's a quick attempt at your code. With a little dedication you can get it better.
div {outline: solid 1px black}
#blocks {
width:80%;
margin:0 auto;
background-color: #ffe;
}
#shelve1,#shelve2,#shelve3{display:inline-block}
#shelve1 {width:21%}
#shelve2 {width:56%}
#shelve3 {width:21%}
#block0 {
height:50px;
background: red;
display:block
}
#block1 {height:50px;background: orange}
#block2 {height:450px;background: cyan}
#block3 {height:225px;background: yellow}
#block4 {height:225px;background: green}
#block5 {height:400px;background: magenta}
<div id="blocks">
<div id="block0"></div>
<div id="shelve1">
<div id="block1"></div>
<div id="block5"></div>
</div>
<div id="shelve2">
<div id="block2"></div>
</div>
<div id="shelve3">
<div id="block3"></div>
<div id="block4"></div>
</div>
</div>
Nowadays, it's also not that good idea to place your pots on a floating tray, with a gust of wind they will all fall down. CSS Tricks explains why and recommends the use of the display property.
I am playing around with using Divs and CSS instead of tables and I am having some problems with my code/CSS. I am trying to set this up so I have 3 columns next to eachother in a container that is centered to the page which has the text aligned to the bottom so the text is around the same height as the bottom of the image I am using in the center column. I have been unable to achieve this and I have a new found respect for UI guys. My code and CSS are as follows. Any guidance would be helpful :)
body {
}
#Container
{
border:1px solid #dddddd;
padding:40px 94px 40px 94px;
background:#ffffff;
width:55%;
height:auto;
border-radius:0px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#Address
{
border:1px solid #dddddd;
position:relative;
text-align:left;
width: 33%;
}
#Phone
{
border:1px solid #000000;
position:relative;
text-align:right;
width: 33%;
}
#Logo
{
border:1px solid #4cff00;
position:relative;
float: left;
width: 33%;
}
HTML
<div id="Container">
<div id="Address">123 Testing Street</div>
<div id="Phone">(ccc) 223-3323</div>
<div id="Logo"><img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" /></div>
</div></blockquote>
see the fiddle here , This is not 100% everything you asked for, but it is a big start! You have the appearance of a table while only using div's. I am not going to finish every little detail for you, but this should get you going, it is almost complete.
#Container{
border:1px solid #dddddd;
padding:5px;
background:#bbb;
width:55%;
margin: 0px auto;
position:relative;
height:200px;
}
.cell{
display:inline-block;
width:32%;
height:100%;
border:1px solid #000;
position:relative;
vertical-align:bottom;
line-height:370px;}
<div id="Container">
<div id="Address" class="cell">123 Testing Street</div>
<div id="Phone" class="cell">(ccc) 223-3323</div>
<div id="Logo" class="cell">
<img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" style="height:50px;" />
</div>
</div>
I simplified your css a bit. See if this is what you're looking for.
#Container{
margin:0 auto;
width:500px;
background:gray;
}
#Address, #Phone, #Logo{
float:left;
width:33%;
height:256px;
line-height:512px;
}
http://jsfiddle.net/39M9L/1/
Part of the problem you're going to have with aligning to the image is there is white space around the logo, so to get the text to align to the edge of the logo, you're going to have to tweak the numbers a bit, rather than rely on the image height.
You can add a span within a div, and use margin-top to make it in the bottom of the div.
CSS:
#Container > div {
min-height: 52px;
float: left;
text-align: center;
}
#Container > div > span {
display: inline-block;
margin-top: 35px;
}
Take a look: [JSFIDDLE] (http://jsfiddle.net/blck/txXE2/)
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 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.