I have a wrapper containing 3 boxes (green: 300px, blue: 200px and yellow: 100px). The container can have a width of either 500px or 300px.
What I want is that, in the case the wrapper's width is 500px, the green and blue boxes get aligned, and the yellow gets hidden (Case A). In the other case (B), if the wrapper's width is 300px, I want to have the green box in the top, and the other 2 boxes aligned together in the bottom.
Is there a way to do this?
All the heights are equal (e.g. 100px)
UPDATE: I cannot control in advance the width of the wrapper. So I need a solution that works for both cases, not 2 solutions (each for 1 case).
<!doctype html>
<html>
<head>
<title>Demo</title>
<style>
#caseA {width: 500px; float: left;}
#caseB {width: 300px; float: left; clear: both; margin-top: 100px;}
#caseA > div, #caseB > div {height:100px; position: relative;}
.boxGreen {background-color:green; width: 300px; float: left; z-index: 3;}
.boxBlue {background-color:blue; width: 200px; float: right; z-index: 2;}
.boxYellow {background-color:yellow; width: 100px; float: right; margin-left:-100px; z-index: 1;}
</style>
</head>
<body>
<div id="caseA">
<div class="boxGreen"></div>
<div class="boxBlue"></div>
<div class="boxYellow"></div>
</div>
<div id="caseB">
<div class="boxGreen"></div>
<div class="boxBlue"></div>
<div class="boxYellow"></div>
</div>
</body>
</html>
How about this:
<style>
#wrapper{
overflow:hidden;
}
.wide{
width:500px;
height:100px;
}
.narrow{
width:300px;
height:200px;
}
#green{
width:300px;
height:100px;
background-color:Green;
float:left;
}
#blue{
width:200px;
height:100px;
background-color:Blue;
float:right;
}
#yellow{
width:100px;
height:100px;
background-color:Yellow;
float:left;
}
</style>
<div id="wrapper" class="wide">
<div id="green"> </div>
<div id="blue"> </div>
<div id="yellow"> </div>
</div>
Then you can swap the 2 classes back and forth when you need to switch styles.
I think you want something like this?
UPDATE: Now using #media querys.
PS. Resize the fiddle html painel to see the result.
Related
I'm trying this:
DIV 1 DIV 3
DIV 2 DIV 4
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
I'm trying to use clear:both but it makes a top margin..
Use other divs to float left 1 and 2 and float right 3 and 4 is not an option in this case..
Here is my css:
.div1 {
height:69px;
float:left;
width:48%;
clear:both;
background:pink;
}
.div2 {
height:200px;
margin-top:10px;
display:block;
float:left;
width:48%;
clear:both;
background:lightblue;
}
.div3 {
height:69px;
line-height:30px;
float:right;
width:48%;
background:red;
}
.div4 {
height:200px;
float:right;
width:48%;
background:yellow;
clear:both;
}
Try changing the order of the HTML and change the clear of the divs.
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
<div class="div4"></div>
And CSS
.div1 {
height:69px;
float:left;
width:48%;
background:pink;
clear:left;
}
.div2 {
height:200px;
margin-top:10px;
display:block;
float:left;
width:48%;
background:lightblue;
clear:left;
}
.div3 {
height:69px;
line-height:30px;
float:right;
width:48%;
background:red;
clear:right
}
.div4 {
height:200px;
float:right;
width:48%;
background:yellow;
clear:right
}
JSFiddle: https://jsfiddle.net/6ywja6dn/
I have wrapped the divs in left and right in another div called "wrap1". Here is the fiddle. https://jsfiddle.net/4j4jasgn/1/ or you have to change the order of the div like - div1,div3,div2,div4
<div class="wrap1">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="wrap1">
<div class="div3">3</div>
<div class="div4">4</div>
</div>
<style type="text/css">
.left-block{
float: left;
clear:left;
width: 50%;
}
.right-block{
margin-left: 50%;
}
</style>
<div class="div1 left-block">Div 1 with float left</div>
<div class="div2 left-block">Div 2 with float left</div>
<div class="div3 right-block">Div 3 No float</div>
<div class="div4 right-block">Div 4 No float</div>
The answers above are not in line with what TO wants.
He says he can't change the order of the divs.
As div's are floated in relation the the closest floating element, it is not possible to float div 3 next to div 1.
The solution is to give div 1 a float left, div 2 a float left, div 3 a position absolute, and div 4 a float right.
This is also a responsive solution, as div's 3 and 4 will position themselves under div 1 and 2.
See this example, move the vertical center line to make the screen smaller and see the div's lining up below each other.
https://jsfiddle.net/6ywja6dn/2/
.div.one { float: left; background: blue; }
.div.two { float: left; clear: left; background: red; }
.div.three { position: absolute; top: 0px; left: 52%; background: purple; }
.div.four { float: right; background: green; }
#media (max-width: 600px) {
.div.one { }
.div.two { }
.div.three { position: static; float: left; clear: left; }
.div.four { float: left; clear: left; }
}
you shouldn't have to use calculation for this.
you put 3(!) div's inside a wrapper div. give the first two the desired width and set the third to display: block and clear: both. Set the divs alternating to float left and right and bob's your uncle.
HTML
<div id='wrapper-div'>
<div id='left-div'>
put your left-div content here.
</div>
<div id='right-div'>
put your right-div content here.
</div>
<div id='clearing-div'></div> <!-- no content here-->
</div>
CSS
#wrapper-div {
width: 600px;
margin: 0px auto;
}
#left-div {
width: 48%;
float: left;
}
#right-div {
width: 48%;
float: right;
}
#clearing-div {
display: block;
clear: both;
}
why this works?
because of the display: block the clearing-div will fill-up the entire width of the wrapper-div. because of clear: both that doesn't allow floating objects either left or right of this div the div is placed on a new line, filling up the entire width of the wrapper-div.
In this case with the width of 48% both will appear about half the size of the wrapper-div.When you choose a set width of 200px for example, they float both left and right with 200px in between them.
if you have 4 divs you want to have 2 by 2 floating left and right you can put 2 divs inside the left-div and the right-div, looking something like this:
<div id='wrapper-div'>
<div id='left-div'>
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div id='right-div'>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
<div id='clearing-div'></div> <!-- no content here-->
</div>
Can you reorder the divs you've got? If so, then you could replace the display:block, float and clear style rules with display:inline-block (for all four divs).
Then you'd have to reorder the divs as (1, 3, 2, 4) to match your original layout.
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
I have one content div with 960px of width and margin 0 auto (centralized), i want put one div occupying all the space of the left margin, how can i do that?
demo jsBin
#container{
position:relative;
width:300px;/*change this*/
margin:0 auto;
height:200px;
background:#cf5;
padding-left:50%;
margin-left:-150px; /*half the width*/
}
#centered{
width:300px;
height:100%;
position:absolute;
right:0px;
background:#eea;
}
HTML:
<div id="container">
<div id="centered">centered</div>
</div>
HERE: http://jsbin.com/oluwos/3/edit is another way to do it.
Use display: table, like this:
http://jsfiddle.net/yVFzh/
<div class="wrapper">
<div class="left-column"> </div>
<div class="centre"></div>
<div class="right-column"> </div>
</div>
html,
body{
width:100%;
}
.wrapper{
display:table;
width:100%;
}
.wrapper > div{
display: table-cell;
background: blue;
height:400px;
}
.wrapper .centre{
width: 960px;
background: yellow;
}
I have two different divs, one that floats left and one that floats right. They are much smaller than the whole page (about 400x200 each) and so the two are far apart hugging the edges of the page. How can I get them next to each other in the center? I tried setting the margins to auto and about 20px, respectively, but it did not change anything..
This is a job for inline-block!
http://jsfiddle.net/hyw6P/
<div id="container">
<div id="left">Left!</div>
<div id="right">Right!</div>
</div>
#container{
text-align:center;
width:100%;
height:300px;
border:1px solid black
}
#left{
border:3px solid blue;
height:100px;
width:100px;
margin:auto;
display:inline-block;
}
#right{
border:3px solid red;
height:100px;
width:100px;
margin:auto;
display:inline-block;
}
Give them a parent div with "margin: 0 auto; width:1000px;"
<div style="margin:0 auto; width:1000px;">
<div style="float:left">Left</div>
<div style="float:right">Right</div>
</div>
Or if you want them right next to each other:
<div style="margin:0 auto;">
<div style="float:left">Left</div>
<div style="float:left">Right</div>
</div>
Add a wrapper div around them both. Set a width on the wrapper and set margin top and bottom to 0 and the left and right to auto. Then set the width of the two float divs to fit the wrapper e.g. 50% will make them the same width.
Try using a z-index and position absolutes, or relative
Heres a link to help ya out
<div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>
http://www.yourhtmlsource.com/stylesheets/csslayout.html
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/html/default.asp
You can accomplish this with a wrapper div and setting the child divs to display as inline-blocks.
CSS:
#a, #b{
border: 1px solid #999;
width: 100px;
display:inline-block;
}
#container {
text-align:center;
}
HTML:
<div id="container">
<div id="a">a</div>
<div id="b">b</div>
</div>
jsFiddle example.
I need help in centering one DIV withing a DIV.
I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.
Within headerContainer, I want 3 more DIVs:
A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).
I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.
Thanks for any help.
CSS:
.leftDiv{
float: left;
width: 400px;
}
.rightDiv{
float: right;
width: 200px;
}
.centerDiv{
width: 100px;
margin: 0 auto;
}
HTML:
<div>
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
DEMO:
Code: http://jsfiddle.net/Xxwrm/6/
Fullscreen: http://jsfiddle.net/Xxwrm/6/show
This works.
.headerContainer{
width:auto !important;
}
.leftDiv{
float:left;
width:400px;
}
.rightDiv{
float:right;
width:200px;
}
.centerDiv{
display:inline;
width:100px;
margin-left:auto;
margin-right:auto;
}
.
<div class="headerContainer">
<div class="leftDiv"></div>
<div class="centerDiv"></div>
<div class="rightDiv"></div>
</div>
What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.
For example in this case you'd have one # 400px, another # 100px, another # 200px and another one, hidden, # 200px.
Regards,
Richard
<div class="headerContainer">
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
This HTML with this CSS will work. I colored the DIV's to make it obvious.
.headerContainer{
width:auto;
}
.leftDiv{
float:left;
width:400px;
background:pink;
}
.centerDiv{
width:100px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
background:cyan;
}
.rightDiv{
float:right;
width:200px;
background:lightgray;
}
However, if the screen is not 700px wide, you will get some wrapping.
Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/
You can use a modern solution due the flex concept of css3.
.parent {
display: flex;
height: 300px;
/* Or whatever */
background-color: green;
}
.child {
width: 100px;
/* Or whatever */
height: 100px;
/* Or whatever */
margin: auto;
/* Magic! */
background-color: yellow;
}
<div class="parent">
<div class="child ">Div1</div>
</div>