I have this html code-
.boxes{
float: left;
}
.box_1{
background-color: orange;
height: 100px;
width: 100px;
}
.box_2{
background-color: blue;
height: 100px;
width: 100px;
}
.box_3{
background-color: green;
height: 100px;
width: 100px;
}
<div class="boxes">
<div class="box_1">
</div>
<div class="box_2">
</div>
<div class="box_3">
</div>
</div>
Why isn't the output like this-
Why I have to add float property to each of the boxes, i.e.,box_1,box_2,box_3 to get the desired output? Thanks for your help!
You are floating the container and should float every single box, to do this you can use the direct descendant of selector (>) in css
or you can try this:
.boxes > div{
float: left;
}
The reason it doesn't show up that way is only the container .boxes is being floated. The float property isn't inherited into child elements.
So the container is floated and the children being "block" elements cause each other to wrap to the next line.
You can fix it by adding a float: left to all of the children (won't show this as other answers have already), or if you only want the parent floated adding display: inline-block to all of the children. The difference being, if you want the content of .boxes to be treated with normal "document flow" rules you don't want them to be floated.
A More Lengthy Explanation
The reason you need to float or change display to inline-block is that doing either will change the <div>s from having a block display to something else. float does so automatically, setting display: inline-block does so explicitly. This will tell the browser to treat the blocks like an inline or word, allowing them to be placed next to one another.
So even though you're floating your container, since the children still are being displayed as block elements they cause each other to break lines and display vertically.
.boxes{
float: left;
}
.boxes > div{
display: inline-block;
}
.box_1{
background-color: orange;
height: 100px;
width: 100px;
}
.box_2{
background-color: blue;
height: 100px;
width: 100px;
}
.box_3{
background-color: green;
height: 100px;
width: 100px;
}
<div class="boxes">
<div class="box_1">
</div><div class="box_2">
</div><div class="box_3">
</div>
</div>
As I said in my comment:
"You're floating the container, not the boxes"
Remove:
.boxes{
float: left;
}
Add:
.boxes > div{
float: left;
}
http://jsfiddle.net/dxuxwpmb/
Change your html layout to the following:
<body>
<div class="boxes box_1">
</div>
<div class="boxes box_2">
</div>
<div class="boxes box_3">
</div>
</body>
OR you can change your CSS to:
.boxes div{
float: left;
}
The issue is that you were trying to float the container and not the dividers within the container.
Related
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
I have a problem aligning my div's side by side...
Here is an image how it should look:
This is the code for the main structure:
<div id="AttackDiv">
<div id="ImageDiv">
</div>
<div id="ContentDiv">
</div>
<div id="SkillDiv">
</div>
</div>
The "ImageDiv" is where the picutre is located. It takes up 120px.
The "ContentDiv" is where the text is inside and the "SkillDiv" is where the 3 other black boxes are inside.
This is my CSS:
#ImageDiv {
height: 100%;
width: 120px;
float: left;
background-color: white;
}
#ContentDiv {
height: 60%;
background-color: green;
}
#SkillDiv {
height: 40%;
background-color: blue;
}
Shows up this:
The problem is when I am trying to add those black boxes which you can see above in the image. Here is how it looks:
If I remove the white background color, you can see that somehow the Div's aren't aligning properly. They are kinda like running in each other.
Divs are block elements by default and, in the normal flow, they occupy 100% width of their container. So, naturally, div elements will stack vertically forming a column.
To make them align side-by-side consider these options:
apply float: left to all divs you want to display in a row
define the divs as display: inline-block
OR, for a very simple and efficient solution, just use flexbox:
Aligning Three Divs Horizontally Using Flexbox
Also, when working with floats, it helps to be familiar with clearfix methods:
What is a clearfix?
What methods of ‘clearfix’ can I use?
Clearing Floats: An Overview of Different clearfix Methods
Put the stuff on the right side into its own div container and then float it to the right.
If I understood you right, this should be it:
HTML
<div id="AttackDiv">
<div id="ImageDiv">left
</div>
<div id="RightSide">
<div id="ContentDiv">right1
</div>
<div id="SkillDiv">right2
</div>
</div>
</div>
CSS
#ImageDiv {
height: 100%;
width: 120px;
float: left;
background-color: white;
}
#ContentDiv {
height: 60%;
background-color: green;
}
#SkillDiv {
height: 40%;
background-color: blue;
}
#RightSide {
float: right;
width: 200px;
}
You can look at it here: https://jsfiddle.net/mxcqyjos/4/
I have a simple html code with div tags
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div >Shouldn't this be on a new line?</div>
and the classes are defined in a style sheet as
.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline
}
.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline
}
The problem i am having is that there seems to be a super-imposition where any div tag that comes after ignores the existence of the former tags whenever there is an align element involved. Please see http://jsfiddle.net/tea0phnr/2/ for what i am talking about.
CSS
.clear {clear:both;}
HTML
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div class="clear"></div>
<div >Shouldn't this be on a new line?</div>
http://jsfiddle.net/tea0phnr/3/
Your floating divs are being pulled out of flow - causing the last div to resume their place in the actual flow. You'd either need to clear:both; the last div, or perhaps with a pseudo element. ( div:last-child:after )
div:last-child {
clear: both;
}
http://jsfiddle.net/hzdcu1xw/
or have it float + width: 100%; as well.
div:last-child {
float: left;
width: 100%;
}
http://jsfiddle.net/efapLo2d/ in order for it to layout accordingly.
I have 3 divs...
if I float the divs to the left, it will look like this..
Now, I want "Div 3" to be positioned below "Div 2" like so..
So, I put
clear: both
to "Div 3" but it ended up looking like this:
"Div 3" went below the div with the largest height which, in this case, is "Div 1".. What should I do to achieve the positioning similar to that of picture 3?
You have a few options.
First, you can keep everything float: left and put a width on the parent container to prevent Div3 from being placed on the top line. The width will knock it down to the next line below Div2 as long as the paren twidth is > the width of div1 and div2.
Second, you could absolutely position the divs.
Lastly, if you dont want to do either of those, your best bet is to go with a JavaScript library like Masonry or Isotope. These libraries were created because the layout you want is very difficult to achieve in pure CSS.
I think you must use < span > for inline div.
(Cannot add comment, hence answered.)
This is what you expecting?
<div class="wrapper">
<div class="Div1"> </div>
<div class="Div2"> </div>
<div class="Div3"> </div>
</div>
.wrapper {
width: 205px;
}
.Div1 {
background: red;
width: 100px;
height:205px;
margin-bottom:5px;
float: left;
}
.Div2 {
background: green;
width: 100px;
height:100px;
margin-bottom:5px;
float: right;
}
.Div3 {
background: yellow;
width: 100px;
height:100px;
margin-bottom:5px;
float: right;
}
JSFiddle Demo
you need 2 outerdivs for that. try this JSFiddle
<body>
<div class="clearfix">
<div class="left">
<div class="div1"></div>
</div>
<div class="right">
<div class="div2"></div>
<div class="div3"></div>
</div>
</div>
</body>
CSS
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0px;
visibility: hidden;
}
.left, .right {
float: left;
}
.div1 {
background: red;
height: 200px;
width: 100px;
}
.div2, .div3 {
background: blue;
height: 100px;
width: 100px;
}
.div3 {
background: green;
}
I have placed 3 divs next to each other using the block-inline property.
When I add text inside the div that exceeds the divs width, it will displace surrounding divs by shifting them down slightly.
<div class="explained_container">
<div class="explained_c-1">Why does text in this div displace the other divs</div>
<div class="explained_c-2">Div 2</div>
<div class="explained_c-3">Div 3</div>
</div>
Here is a fiddle I created to present the problem.
http://jsfiddle.net/32E8m/
Add float:left to these classes .explained_c-1, .explained_c-2, .explained_c-3
Missing float: left.
.explained_c-1, .explained_c-2, .explained_c-3 {
display: inline-block;
width: 33.3%;
height: 160px;
margin-right: -4px;
float:left;
}
See http://jsfiddle.net/32E8m/3/
I have added float:left; to all 3 div elements.
now you can add as many text as you want.
<div class="explained_container">
<div class="explained_c-1">Now you can have as many text as you want</div>
<div class="explained_c-2">Div 2</div>
<div class="explained_c-3">Div 3</div>
</div>
.explained_container{
width: 604px;
}
.explained_c-1, .explained_c-2, .explained_c-3 {
display: inline-block;
width: 33.3%;
height: 160px;
margin-right: -4px;
float: left;
}
.explained_c-1 {
background: #bbb;
}
.explained_c-2 {
background: #ccc;
}
.explained_c-3 {
background: #ddd;
}
http://jsfiddle.net/32E8m/4/
I would just set the vertical-align: top; property to those classes (.explained_c-1, .explained_c-2, .explained_c-3) because you might not always want to float them.
Check it out here: http://jsfiddle.net/32E8m/5/
This way, you are aligning the elements to each other from the top of each of them.