<div id="home">
<div id="logo"></div>
<div id="foot">
<div id="one">
<span id="aaa" class="test">aaa</span>
</div>
<div id="two">
<span id="bbb" class="test">bbb</span>
</div>
</div>
</div>
#home {
width: 400px;
height: 400px;
}
#logo {
height: 200px;
background-color: green;
}
#foot {
height: 200px;
}
#one {
height: 200px;
width: 200px;
background-color: red;
}
#two {
height: 200px;
width: 200px;
background-color: blue;
float: left;
}
.test {
margin-top: 50px;
margin-left: 50px;
background-color: yellow;
}
why in this example float: left doesnt working? and why margin-top set position of #home and not of parents?
LIVE: http://jsfiddle.net/tLuTS/10/
Floating doesn't work in your example because you need to float both elements that you want on the same line.
So I've updated your example with #one and #two floated left. Also added some IE float fixes. http://jsfiddle.net/tLuTS/11/
I'm not sure what you're trying to achieve using margin-top.
Both elements need to be floated, and the second one should have clear:both set.
Example
Just add this
#one {
height: 200px;
width: 200px;
background-color: red;
float:left;
}
Here is the updated version on jsfiddle.net.
This is because your inline CSS "test" . For Span Id="bbb", there are two CSS define one is "test" and other is "two". Priority of "test" is more so float is not working .
I'm assuming you want one and two both in the footer. So you have to apply
float: left;
to one as well. About the margins: I can only see margins applied to the text with yellow background. These are <span>s, so inline elements. Make these block level elements, like <p>, for the margin to have effect.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
I'm trying to make some divs float left to create some drop down menu. My problem is this. When I do float left, unless the div after the first one also has float: left, it will go inside the first div.
I can't put float: left, on everything because it means I can't really do anything. It was working before, but I'm not sure why they're going in inside each other?
#box1 {
width: 200px;
height: 100px;
background-color: red;
float: left;
}
#box2 {
width: 200px;
height: 100px;
background-color: blue;
}
<div id="box1">
</div>
<div id="box2">
</div>
MaKe both the divs float left
#box1{
width: 200px;
height: 100px;
background-color: red;
float: left;
}
#box2{
width: 200px;
height: 100px;
background-color: blue;
float:left
}
Div is itself a block element, to make it inline use float on both divs
Seems to work just fine with the input suggested by Asif Ahmed.
Just add float: left; at #box2
(added margin to show its not overlapping)
https://jsfiddle.net/jwe5cohy/
I have two divs next to each other. The div on the right is 300px x 335px. The div on the left goes all the way down the page. I want the width of the left div to go all the way until the right div. Then under the right div, it takes up the whole width of the page. Is this possible?
div elements are block level elements. So they are like square blocks. No, they can't work as you ask. However, you might Google for CSS Shapes to see if it can do what you wish but it's not available in all browsers and still isn't exactly the same as you request.
Here is some option either you can add min-width to the short div and long div to extend it. or you can add a background-color body to fake the illusion of it. but like Rob said there is no good way that can work out.
.short {
width: 100px; height: 100px;
background:red;
float:left;
//min-height: 500px;
}
.long {
width: 100px; height: 500px;
background:blue;
float:left;
//min-height: 500px;
}
.width {
width: 100%;
height: 200px;
background:yellow;
}
.clearfix {
overflow: auto;
zoom: 1;
}
body {
// background-color: red;
}
<div class="clearfix">
<div class="short"></div>
<div class="long"></div>
</div>
<div class="width"></div>
That is not possible, although you could always put another div under the one on the right and set the margin so that it looks like it's part of the one on the left.
This is one of the method to achieve what you want
CSS
#left1 {
margin-right: 300px;
height: 335px;
background: #aaa;
}
#right {
width: 300px;
height: 335px;
float: right;
}
#left2 {
background: #aaa;
border: 1px soild #000;
min-height: 300px;
}
<div id="right"></div>
<div id="left1"></div>
<div id="left2"></div>
I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.
I have tried this :
<div class="wrapper">
<div class="control leftControl"></div>
<div class="display"></div>
<div class="control rightControl"></div>
</div>
And here is my css:
.wrapper {
width: 100%;
height: 100%;
min-width: 960px;
background-color: #E8E8E8;
}
.control {
width: 10%;
height: 100%;
display: inline-block;
background-color: #ADADAD;
}
.leftControl {
float: left;
}
.rightControl {
float: right;
}
.display {
width: 80%;
height: 100%;
display: inline-block;
}
The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.)
It is clear to me that this is not a correct solution.
Any help is appreciated.
You can put all your elements float:left and your 100% will always fit: fiddle
HTML
<div class="control"></div>
<div class="display"></div>
<div class="control"></div>
CSS
.control {
width: 10%;
height: 200px;
background-color: green;
float:left;
}
.display {
width: 80%;
height: 200px;
background-color:blue;
float:left;
}
Putting everything on float left will simply push divs one by one on the right.
I have nested divs like so:
<div class="first">
<div class="second">
<div class="third"></div>
</div>
</div>
The third div contains dynamic content - so I don't know it's dimensions.
What I want is the second div to take the width of the third div and not of the first div which is a lot bigger.
So in this demo, I want the border to enclose the green square.
Is this possible with css only? if so, how?
Thanks.
Put a float: left; in the second class. That should do the trick.
.second {
float: left;
}
or
.second {
display: inline-block; //not working on ie7
}
Actually div is a block level element so you can give the display:inline-block to second div and than it will take the third div width & height vic-versa...
CSS
.first
{
width: 500px;
height: 500px;
background: yellow;
}
.second
{
border: 5px solid blue;
display:inline-block;
}
.third
{
min-width: 100px;
min-height: 100px;
background: green;
}
DEMO