I'm trying to make a divider for my page, usign three divs with different colors to form a single line with a height of 2px. I am creating a div with 3 subdivs, each with a height of 2 px.The parent div is inexplicably taking a space of 18px, I thought the parent div should only occupy the space of his children.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin: 0; padding: 0">
<div class="separator">
<span class="third t1"></span><!--
--><div class="third t2"></div><!--
--><div class="third t3"></div>
</div>
</body>
</html>
And my CSS:
.separator {
height: 2px;
width: 100%;
}
.third {
height: 2px;
margin-top: -10px;
width: 33.33%;
display: inline-block;
}
.t1 {
background-color: #ff7474;
}
.t2 {
background-color: #f1f58d;
}
.t3 {
background-color: #72baf1;
}
Here is the codepen.io link for my code:
http://codepen.io/anon/pen/vjdnx
Your problem is that because you are using inline block the separator div is using the font size to determine it's height and the line-height of the child elements.
First you need to comment out all of the white space (as display:inline-block will treat the elements like words in a sentence so white spaces will show up between them):
<div class="separator"><!--
--><span class="third t1"></span><!--
--><div class="third t2"></div><!--
--><div class="third t3"></div><!--
--></div>
then you need to add the following style to your separator div:
.separator {
height: 2px;
width: 100%;
font-size:2px;
}
Example
JsFiddle
Just add float:left; to .third class. It's one way to get rid of the space that display:inline-block creates. I've also removed margin-top:-10px (else you cannot see the elements)
Before
.third {
height: 2px;
margin-top: -10px;
width: 33.33%;
display: inline-block;
}
After
.third {
float:left;
height: 2px;
width: 33.33%;
display: inline-block;
}
Remeber : Floating elements needs a parent with overflow:hidden or an element with clear:both after them.
Related
i have two div elements that float on both sides (Left And Right). i applied hr tag after closing the first div tag (That floats left) and before opening the next div tag (That floats right). But the hr tag is displayed at the top background. To see the hr tag, see the small connecting line between the two divs (At the top).
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.leftmovie {
border: solid;
float: left;
width: 47%;
margin-left: 2em;
height: 400px;
}
.rightmovie {
border:solid;
float: right;
width: 47%;
margin-right:2em;
height:400px;
}
</style>
</head>
<body>
<div class="Row">
<div class="leftmovie">
<span class="Star">ergjkh<br>kdjnkj</span>
</div>
<div class="rightmovie">legnlejgn<br>gegerge</div>
</div>
<hr>
<div class="Row">
<div class="leftmovie">
<span class="Star">ergjkh<br>kdjnkj</span>
</div>
<div class="rightmovie">legnlejgn<br>gegerge</div>
</div>
</body>
</html>
Because you don't use clear: both after applying float property.
Add this in hr tag.
hr {
display: inline-block;
width: 100%;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I have a parent element (div) with a fixed width of 1200px. There are no borders or padding on this element.
I have three inline child elements (divs) with fixed widths of 400px. Again, no borders, padding or margins.
I want my three child elements to sit on the same line but instead the third one gets pushed down. If I reduce their widths to 397px they all sit on the same line.
Why can't I divide the width of a parent container exactly by the number of children I want to sit abreast within that container? Much the same way that I can't define those child elements as percentage widths that add up to 100% (ie four children of all 25% width)?
This happens due to the extra spacing cause by the white space in the code itself. You can fix it by either writing the markup in a way that makes sure there are no white space or you can set the parent div's font-size to 0 so no white space is visible (make sure you then set the children div font's size back to normal)
In this example I've used the first method as it is cleaner
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div><div class="child"></div><div class="child"></div>
</div>
style
.parent {
width: 1200px;
background-color: #333;
margin: 20px 0; /* outer margin doesn't matter */
}
.parent .child {
width: 400px;
height: 300px;
display: inline-block;
background-color: #ccc;
}
The first box doesn't work, the second does as I've left no space between the closing and opening tags of the child elements
http://jsbin.com/cifedis/edit?output
You need to use float:left to your children in order to achieve this
.parent {
width: 1200px;
height: 200px;
background: pink;
}
.child {
float: left;
width: 400px;
display: inline-block;
background: red;
}
<div class="parent">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
</div>
You can add css like this=>
.parent_container{
width:1200px;
float:left;
}
.child1,
.child2,
.child3{
float:left;
width:400px;
display: inline-block;
}
inline-block elements (which I'm guessing you are using), by default, have a white space after them, which might cause the issue you are seeing.
There are a number of ways to remove this in the html itself, one of them being adding a comment between the two inline-block elements. I prefer this approach, as its more readable.
.parent {
width: 600px;
height: 50px;
background: grey;
}
.child {
display: inline-block;
width: 200px;
height: 50px;
background: pink;
}
<div class="parent">
<div class="child">1</div><!--
--><div class="child">2</div><!--
--><div class="child">3</div>
</div>
You can also start the divs in the same line, like below, forgoing the comment
<div>content</div><div>
content</div
There is lots of solution I prefer flexbox
.parent {
display: flex;
}
.child {
flex:1 1 400px;
background-color:red;
max-width: 400px;
height: 400px;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
If you really want to use with inline-block either make font-size:0; to the parent or do not change the line while creating children element
.parent{
width:1200px;
}
.child {
background-color:red;
width: 400px;
height: 400px;
display: inline-block;
}
<div class="parent">
<!-- Do Not change line of children-->
<div class="child">1</div><div class="child">2</div><div class="child">3</div>
</div>
please read details https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Just Give Parent Div Font Size 0px Below is the Code,
You Can Also do the same by float Left But This is the Best Way :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pratice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.contaniner {
width:1200px;
font-size: 0px;
}
.threelock {
background: #000;
width: 400px;
height: 400px;
display: inline-block;
}
.yllow {
background: yellow;
}
.red {
background: red;
}
</style>
<body>
<div class="contaniner">
<div class="threelock"></div>
<div class="threelock red"></div>
<div class="threelock yllow"></div>
</div>
</body>
</html>
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;
}
I have this HTML code
<div style="display:inline" >
<div>
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
I got this result:
I need to change my code to get a result like this :
I need the two labels displayed in the same line and each div (parent to each label) having a width of 50 percent of the page's width.
How can i change my snipet to do that?
Thanks
Try something like this:
<div style="display:inline" >
<div style="float: left; width: 50%;">
<label>NOM:</label>
</div>
<div style="float: left; width: 50%;">
<label>Ben felten</label>
</div>
</div>
You need display inline for more than just the parent div.
div{
display:inline;
}
label{
display:inline;
}
http://jsfiddle.net/SVH5C/
add a class to your main div:
<div class="main">
<div >
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
and in your css:
.main div{width: 50%; float: left;}
Or if those inside divs are realy there just for the labels there's no need for them to exist and you can style the labels directly, like:
<div class="main">
<label>NOM:</label>
<label>Ben felten</label>
</div>
CSS:
.main label{display: block; width: 50%; float: left;}
HTML:
<div>
<div class="label-container">
<label>NOM:</label>
</div>
<div class="label-container">
<label >Ben felten</label>
</div>
<div class="labels-end"/>
</div>
CSS:
div.labels-end{
clear: both;
}
div.label-container{
float: left;
width: 50%;
}
And the fiddle http://jsfiddle.net/RsK5N/3/
Div "labels-end" is not mandatory if labels spread over the entire width like in this case.
Without extra clear: both styled div browser will try to put the latter content in the same line as your labels. So it works without this div but only because there is no more width available.
You can also use inline-blocks and table-cells as follows.
Using inline-blocks
<div class="ex1">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex1 {
border: 1px dashed gray;
width: auto; /* will take the width of parent (page) container */
}
div.ex1 label {
display: inline-block;
width: 50%;
background-color: beige;
overflow: auto;
vertical-align: top;
}
Using CSS table-cells
<div class="ex2">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex2 {
border: 1px dashed gray;
width: 100%; /* will take the width of parent (page) container */
display: table;
}
div.ex2 label {
display: table-cell;
width: 50%;
background-color: beige;
}
If you use inline blocks, you need to be careful about any white space between the two label elements since any white space will add to the width of the line and will cause the second label to wrap to a second line. Use vertical-align: top to get rid of the extra white space below the labels which arises because of the inline formatting.
The extra white space issue does not arise with table-cells. Use width: 100% on the table div to make it fill up the width of the parent container (auto gives a shrink-to-fit width).
See demo: http://jsfiddle.net/audetwebdesign/Nb24q/
Comment: You don't need to wrap the label elements in div unless you need them for some other reason.
I have some questions about basic CSS that I was unable to understand or find an answer for.
First, I tried placing 3 div tags within another div tag. The first main div tag containing the 3 other tags had nothing set for it except a size, which was 400px by 400px. Of the other 3 divs inside, all were 20px by 20px, and 1 was assigned float:left, and the other two were assigned a style that was float right. All attributes were defined within a style, and the two divs that were float:right were assigned the same style. My problem is that out of the 2 divs, the one that came last in the code, would appear first in a browser, and I did not understand the reasoning for this.
Here is the code:
<html>
<head>
<style>
#main{
border: red 4px dashed;
width: 25%
height: 25%,
}
#left{
float: left;
width: 20px;
height: 20px,
}
#right{
float: right;
width: 20px;
height: 20px,
}
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">2</div>
<div id="right">3</div>
</div>
</body>
</head>
</html>
My problem is that out of the 2 divs,
the one that came last in the code,
would appear first in a browser, and I
did not understand the reasoning for
this.
I think that You misunderstood a "appear first". You set Your divs to be floating right. So a "2" div, which is FIRST in Your code, is FIRST to be floated right, so it goes first to the right side. A "3" div is then floated, so i goes to the left side of the "2" div - because "2" was first, it took first place at the right side of the browser window, and div "3" took second place at the right side of the window.
In this case "second place at the right side of the window" means "first, looking from the left" ;-)
At first, I would use class and not id for the divs. But there are also some typo's in the css:
#main{
border: red 4px dashed;
width: 25%; /* <-- Missing ; */
height: 25%; /* <-- change , to ; */
}
#left{
float: left;
width: 20px;
height: 20px; /* <-- change , to ; */
}
#right{
float: right;
width: 20px;
height: 20px; /* <-- change , to ; */
}
I don't know about the layering problem, but you can't have two elements with the same ID. You probably want:
...
<div class="right">2</div>
<div class="right">3</div>
...
and change #right to .right in the CSS.
I think your problem is that you are using id instead of class. An ID is supposed to be unique, so the second div with id="right" is the only one with that id.
You could change your code such that you have:
< div class="right" >2< /div >
< div class="right" >3< /div >
(instead of id="right")
And in the css you would have:
.right {
float: right;
width: 20px;
height: 20px,
}
(instead of #right)
you can use this code
<div id="main">
<div id="left">1</div>
<div id="right">3</div>
<div id="right">2</div>
</div>
You cannot use the same id for more than one time.
<div class="right">2</div>
<div class="right">3</div>
Better way you can do it with assigning class.
<html>
<head>
<style>
#main {
border: 4px dashed red;
display: block;
overflow: hidden;
}
#left {
float: left;
width: 20px;
height: 20px,
}
#right {
float: right;
width: 20px;
height: 20px,
}
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">3</div>
<div id="right">2</div>
</div>
</body>
</head>
</html>