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.
Related
I cant find solution to my problem, so I am asking you for help... I have 1 div which is changing its height depending on browser window height. Inside of this div is 5 another divs 4 per line, when I resize window size to smaller size divs fall down on line 2, 3, etc. That´s good, but these divs arent in the middle of the main div which is resized and that is what I looking for... Thank you
HTML:
<div id="main">
<!--Div1-->
<div class="mosaic-block fade">
</div>
<!--Div2-->
<div class="mosaic-block fade">
</div>
<!--Div3-->
<div class="mosaic-block fade">
</div>
<!--Div4-->
<div class="mosaic-block fade">
</div>
<!--Div5-->
<div class="mosaic-block fade">
</div>
</div> <!--main-->
CSS:
div#main {
border: #CCCCCC thin solid;
max width: 840px;
height:600px;
min-width: 210px;
border: #CCCCCC thin solid;
margin:0 auto;
max-width: 840px;
}
.mosaic-block {
margin-bottom:50px;
position: relative;
float:left;
margin:4px;
top:50px;
overflow:hidden;
width:200px;
height:200px;
background:#111 url(../img/progress.gif) no-repeat center center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
Instead of float:left; for .mosaic-block, you might want to try display:inline-block; and adding text-align:center; to your main. It's a bit dirty, but it works !
PS. you might want to remove that max width: 840px; , I doubt it's a valid declaration !
Add in your CSS #Main
overflow:auto;
I´m trying to set a background color on a div that is stretched (using negative margins) to the full width of its outermost parent div.
Here´s a simplified example: http://jsfiddle.net/U5dnd/
The white div .featured-wrapper covers the full width of the black div .site, but its background color doesn´t. I suppose the margins are transparent.
Is there a way to make the whole .featured-wrapper div white, including its (negative) margins? (Or is there another way to accomplish this?)
Thanks!
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0px 0 0px;
position:absolute;
width:100%;
z-index:100;
left:0;
}
Check this
JS Fiddle
CSS:
.site {
background-color:black;
padding: 0 40px;
height:300px;
width:320px;
}
.site-content {
width:100%;
overflow:hidden;
}
.wrapper {
overflow:hidden;
background-color:red;
height:100%;
}
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0 0 -40px;
position: absolute;
width: 399px;
}
HTML:
<div id="page" class="site">
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div class="featured-wrapper">
<p>This is the featured wrapper</p>
</div>
</div>
</div>
</div>
I know this might look like an old question but Im trying to put 3 divs side by side but the middle div should stretch with the form resizing. I found this here and used their code but it doesnt work. The right div still gets pushed down bellow the div instead of being next to it.
Here is an example of what I have but like I said the right div gets pushed down bellow the div instead of being next to it.
Can someone please share their well earned knowledge!
HTML:
<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
CSS:
.mainDiv{ position: relative;}
.left{ position: absolute; left: 0; top: 0; width: 100px; }
.right{ position: absolute; right: 0; top: 0; width: 100px; }
.center { margin: 0 100px; }
JSFiddle
Updated Fiddle as per your new requirement :)
<div style="border:1px solid red; height:140px;">
<div style="width:100px; float:left; border:1px solid blue;">
left
</div>
<div style="width:100px; float:right; border:1px solid blue; ">
right
</div>
<div style="border:5px solid green; overflow:hidden;">
middle
</div>
check this example
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.
In this example http://jsfiddle.net/czwsK/ how would I align the text "hello" to be 10% of the height of the box from the top? eg the first inline block would be 20px from the top.
This JSFiddle demonstrates what you need to do. As Diodeus recommends, you shouldn't use a percentage, however if you want to, wrap your elements in a container div and give that div the height you want, then you can use percentages with vertical-align: top on the text div.
HTML:
<html>
<body>
<div class="container">
<div class="text">hello</div>
<div style="display:inline-block; height:100%; width:200px; border: 1px solid black"></div>
</div>
</body>
</html>
CSS:
div.container {
height: 200px;
}
div.text { display: inline-block;
vertical-align: top;
margin-top: 10%;
}
I think you if want it 20px from the top, you should use 20px, not 10%. Here it is using %
<html>
<body>
<div style="display:inline-block;dislpay:table-cell;vertical-align:top;padding-top:10%">hello</div>
<div style="display:inline-block; height:200px; width:200px; border: 1px solid black"></div>
</body>
</html>