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.
Related
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.
doc.html
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container elem">
<div class="nav"></div>
<div class="elem column"></div>
</div>
</body>
</html>
I wrote doc.html and css2.css according to this guide learnlayout. but the page looks like this.
how to make those two parts in one line?
Your CSS is correct; this issue is a well known whitespace problem. You need to make sure that there is no whitespace between the tags:
<body>
<div class="container elem"
><div class="nav"></div
><div class="elem column"></div
></div>
</body>
This is because your content is inline, which makes the whitespace between .nav and .elem flow. It's small (around 4px), but enough to separate your <div>s and break your layout.
By placing the closing bracket right next to the starting bracket in the next element, all the whitespace in between is instead inside the tag, not part of the content (and since tags can contain whitespace between attributes and tag names, this is OK).
This is the typical whitespace problem with inline-block. You can always solve it by assigning font-size: 0; to the parent element.
.container.elem {
font-size: 0;
}
/* remember to reset font-size to what you need in child elements */
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
<div class="container elem">
<div class="nav"></div>
<div class="elem column"></div>
</div>
Another solution would be to make both divs float left, but that has it's own problems and complexity which is why I'd advise sticking with inline-blocks.
The issue is with whitespace. To fix it, apply this CSS to the container:
.container{
font-size:0;
}
It's simply make them into one line, except if the parent width is setted and their combined width is bigger than their parents.
.container.elem div{
float:left;
}
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
I created 1 parent id named "mod1" and 2 child classes named "left" and right".
When I call the left and right classes inside the parent mod1 id, they are overflowing from the parent id's height. I don't want to explicitly mention height of parent id "mod1", I simply want it to stretch as per the child classes within. The problem is that the parent id is not actually CONTAINING both it's child classes i.e. none of the child are having background color as #888 and the border seems to appear right above them.
This is my html code
<head>
<style>
body
{
max-width: 600px;
margin: auto;
}
#mod1
{
background-color: #888;
border: 1px solid black;
}
#mod1 .left
{
float: left;
width: 75%;
}
#mod1 .right
{
float: left;
width: 25%;
}
</style>
</head>
<body>
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
</div>
</body>
The reason why the parent's height appears to collapse is because when you float an element, it is taken out of the document flow and therefore does not contribute to the computation of the parent container's final dimensions. If all the children are floated, then the parent's height will collapse to zero.
The solution is rather simple: use overflow: hidden to clear the float in the parent element. However, if you have overflowing content that you want to show (like a dropdown menu), you will have to employ the clearfix solution.
#mod1
{
background-color: #888;
border: 1px solid black;
overflow: hidden;
/* overflow: auto; will also work fine */
}
You can see from the snippet below that adding the rule works:
body
{
max-width: 600px;
margin: auto;
}
#mod1
{
background-color: #888;
border: 1px solid black;
overflow: hidden;
}
#mod1 .left
{
float: left;
width: 75%;
}
#mod1 .right
{
float: left;
width: 25%;
}
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
</div>
The CSS property float causes the element to "collapse", which is why the container element looks like it's not containing the left and right elements. I usually make a dummy div below them, inside the container class, and give it the property clear: both;
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
<div class="dummy"></div>
</div>
and give it the style:
.dummy {
clear: both;
}
See other possible solutions: How do you keep parents of floated elements from collapsing?
You have to clear your floats when using floats (most of the time).
Use flex instead. Then you don't have to clear floats. It makes things like this easier.
body {
max-width: 600px;
margin: auto;
}
#mod1 {
display: flex; /* Tells the browser you want children to use flex */
font-family: sans-serif;
color: white;
}
.left,
.right {
flex: 1; /* Tells the browser to take "one piece of pie" for the width (or height, depending on flex-direction) */
padding: 1em;
}
.left {
background: orange;
}
.right {
background: darkorange;
}
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
</div>
I need inner_holder to have width of 960px and I need it to be centered. I tried using width: 960px and margin: 0px auto but it doesn't work. How can I center the divs inside inner_holder?
HTML:
<div class="parent_container">
<div class="inner_holder">
<div class="column column1">
<div class="inner_clip"></div>
</div>
<div class="column column2">
<div class="inner_clip"></div>
</div>
<div class="column column3">
<div class="inner_clip"></div>
</div>
</div>
</div>
CSS:
.parent_container {
height: auto;
margin: 15px auto;
min-height: 500px;
width: 960px;
}
.column {
float: left;
margin-right: 50px;
}
.inner_clip {
background-color: #333333;
height: 250px;
margin-bottom: 20px;
width: 250px;
}
As you can see here the "div that contains floated elements" is actually in the center (red).
I am assuming you want to center the floating elements themselves, not their parent. I'm afraid you can't do that (as far as I know). But in case you are not depending on your elements actually floating, you propably just want to display your .colum as inline-block with an text-align:center set to the parent.
Changes to your CSS:
.parent_container {
text-align:center; // added
}
.column {
display: inline-block; // added
margin: 0 25px; // added
float: left; // removed
margin-right: 50px; // removed
}
Result as Fiddle
I beat my head trying to figure this out forever.
The answer above about assigning "display:inline-block" to the elements in the div, and then assigning "text-align: center" to the parent div works
BUT BUT BUT... I had a class of "clearfix" on my parent div that apparently was mucking the whole thing up. As soon as I removed that clearfix class everything centered nicely (after hours of futile frustration, of course;).
Hope this helps someone.