This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I have a basic issue.
I want two div's next to each other. I would usually do this with a display:block; and a float:left; on both elements.
What I try to do now is display:inline-block; and a width:60% for the left div and a width:40% for the right div.
The problem is that the div's won't align because one of the is to big. If I reduce one in size it works but then there is a lot of space around the second div.
Here is a Fiddle:
Can anyone see what I do wrong?
M.
Inline elements are sensitive to white space in your code. Remove the white space:
<div class="wrapper">
<div id="header">
Header
</div><div id="container">
Container
</div><div class="sidebar">
Sidebar
</div><div id="footer">
Footer
</div>
</div>
jsFiddle example
with inline-block white space will effect the flow of your document.
Remove the white space on these elements.
.wrapper{
margin: 0 auto;
text-align: left;
background:#000000;
}
#header{
width: 100%;
background:#00FF73;
}
#container{
width: 60%;
display: inline-block;
vertical-align: top;
background:#FF0004;
}
.sidebar{
width: 40%;
display: inline-block;
background:#0037FF;
}
#footer{
width: 100%;
background:#B400F9;
}
<div class="wrapper">
<div id="header">
Header
</div>
<div id="container">
Container
</div><!--
--><div class="sidebar">
Sidebar
</div>
<div id="footer">
Footer
</div>
</div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I recently realized that we can't align multiple divs inside container horizontally - without a space between them and without using float.
I applied inline-block to the divs inside the container element and gave them width in %. but there appears to be some extra space. I know it's because of the hidden characters. Refer below image - Red line is container's
I want to make it like the below image using inline-block and take up the entire width of the container. I can't use flexbox to parent since I want to make it responsive and hide/reposition some elements after breakpoints. I also don't want to use floats since it pulls out the divs outside and make the container element useless. Also, it is meaningless to remove the spaces and tabs to make it work... it would be a mess to type the code in there.
Now come on CSS, there has to be something. It shouldn't be this frustrating and CSS shouldn't be this dumb.
Here's my code,
.container{
width: 100%;
height: auto;
}
.section{
display: inline-block;
}
.homebar{
width: 24%;
height: 600px;
background-color: #222;
}
.content{
width: 50%;
min-width: 500px;
height: 600px;
background-color: #fbfbfb;
}
.sidebar{
width: 24%;
height: 600px;
background-color: #158;
}
<div class="container">
<!-- Home/Menu Bar-->
<div class="section homebar">
</div>
<!-- Content Area -->
<div class="section content">
</div>
<!-- Sidebar Area -->
<div class="section sidebar">
</div>
</div>
To remove space between element which are placed as inline-block, set font-size:0px in parent div or second option is marking use of negative margin as below,
#container{
width:100%;
height:auto;
overflow:hidden;
border:2px solid red;
font-size:0px;
}
#container > .homebar{
width:33.2%;
height:200px;
display:inline-block;
background:yellow;
}
#container > .content{
width:33.3%;
height:200px;
display:inline-block;
background:green;
}
#container > .sidebar{
width:33.3%;
height:200px;
display:inline-block;
background:blue;
}
<div id="container">
<!-- Home/Menu Bar-->
<div class="section homebar">
</div>
<!-- Content Area -->
<div class="section content">
</div>
<!-- Sidebar Area -->
<div class="section sidebar">
</div>
</div>
I came across this issue recently and what i found out is that when using inline-block to align divs. Browser HTML automatically adds in default margin to the right of each div block due to font-size. The only solution i found good in my scenario was to join the divs by adding a right margin fix of -4px (default space used by browser due to default font-size) on the divs we have style display:inline-block;.
So just add margin-right:-4px; to your .section class that you will be good to go.
You can also use font-size:0px; on the .container class to achieve this as well but that will force you to reset font-sizes for each element within the container so that is why i went with the margin adjustment solution.
Hope this helps.
The reason why you get these gaps are because of the font-size of the divs.
Please note the solution:
div {
border: 1px solid black;
font-size: 0;
}
.container{
width: 100%;
height: auto;
}
.section{
display: inline-block;
}
.homebar{
width: 24%;
height: 600px;
background-color: #222;
}
.content{
width: 50%;
min-width: 500px;
height: 600px;
background-color: #fbfbfb;
}
.sidebar{
width: 24%;
height: 600px;
background-color: #158;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<!-- Home/Menu Bar-->
<div class="section homebar">
</div>
<!-- Content Area -->
<div class="section content">
</div>
<!-- Sidebar Area -->
<div class="section sidebar">
</div>
</div
</body>
</html>
Basically, I Always use normalize in my pages to solve the issues from the start.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Im a beginner in css, and Im trying to build something where I have the div with the yellow background a little bit in front of the red div and then I want the gray div next to the yellow div.
Im trying to achieve this with the code below, and it is already almost doing what Im looking for, the only thing that is happening that I dont want is that the gray div have a little white space between the yellow div, but Im not understanding why. And while Im resizing the browser the yellow div moves down and is no longer above the red div. Do you know why?
Thanks!
html:
<div class="container" style="background-color:#e02; color:#fff;">
<div class="content">
<header>
<h1>
Title
</h1>
</header>
</div>
<div class="container" style="background-color:#fff";>
<div class="content ">
<ul class="links">
<a>Users</a>
<a>Users</a>
<a>Users</a>
<a>Users</a>
</ul>
<div class="text" style="background-color: #DDD;">
<p>
Go to this links and
</p>
</div>
</div>
</div>
</div>
css:
*, *:before, *:after{
margin: 0;
padding: 0;
}
.container{float:left; width:100%}
.content{width:50%; margin:0 25%; padding: 40px 0}
.links{
width: 100%;
display: inline-block;
}
.links a{
padding: 30px;
float: left;
color:#aaa;
font-size: 16px;
font-weight: 600;
background: yellow;
margin-top: -10%;
border:1px solid #aaa;
}
jsfiddle:
https://jsfiddle.net/s4wwmpqk/4/
An immediate fix to your problem can be done by changing .links
.links{
width: 100%;
display: block;
}
And adding
.text {
clear: both;
}
Fiddle: https://jsfiddle.net/3jjv5zqe/
Why its happening is an inherited behaviour with the style inline-block.
See:
Why is there an unexplainable gap between these inline-block div elements?
Edit:
The reason why your links are moving down is because of the margin-top: -10% you had on your .links a. Percentages scale based on the parent element's width so as the .links width grew smaller, so did the negative margins.
Updated Fiddle:
https://jsfiddle.net/3jjv5zqe/1/
How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?
So:
---||||-||||-||||---
--------||||--------
When i write:
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
...
</div>
</div>
Then after a element go down, all div elements go to the left side.
I would recommend using display: inline-block on the elements and then using text-align: center on the container to handle the centering you want:
I cleaned up your HTML but here is the basic HTML formatting with a container class and multiple (as many as you want) block class DIVs:
<div class="container">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>
The CSS modifies the display settings of the blocks and the text-alignment of the container:
div.block {
display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
width: 315px;
margin: 10px 0;
height: 340px;
}
div.container {
width: 100%;
text-align: center; /* this is the magic that centers the elements */
}
I put together a small demo that should help demonstrate this method: JSFIDDLE
Be Aware: a small 'quirk' exists with the display: inline-block CSS. it causes a small amount of space to occur between the elements. This can be removed multiple ways, my preferred methods being either using comments or wrapping the closing tags of the DIVs. (the issue is caused by the return/spaces between the elements in the HTML):
<div class="container">
<div class="block">Text</div><!--
--><div class="block">Text</div><!--
--><div class="block">Text</div>
</div>
<div class="container">
<div class="block">Text</div
><div class="block">Text</div
><div class="block">Text</div>
</div>
reference for the quirk behavior
Create a container <div> that is 100% of a given area. Then set each <div>'s width inside the container to be a % and float: left;. They'll stack next to each other until they do not fit and will break to the next line.
.container {
width: 100%;
}
.three {
width: 33%;
min-width: 225px;
float: left;
border: 1px solid black;
}
<div class="container">
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
</div>
Run the snippet.
You could use media queries to write different css code for different sizes:
Media Queries
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
My goal is to display two <div>s side-by-side with the content from both <div>s aligned at the top. I do not want long text in the second <div> to wrap underneath the first one.
Finally, I do not want to set the width of the second <div> because I need the markup to work in different widths.
Sample markup is below and at http://jsfiddle.net/rhEyM/.
CSS
.left-div {
float: left;
width: 100px;
height: 20px;
margin-right: 8px;
background-color: linen;
}
.right-div {
float: left;
margin-left: 108px;
background-color: skyblue;
}
HTML
<div class="left-div">
</div>
<div class="right-div">
My requirements are <b>[A]</b> Content in the two divs should line
up at the top, <b>[B]</b> Long text in right-div should not wrap
underneath left-div, and <b>[C]</b> I do not want to specify a
width of right-div. I don't want to set the width of right-div
because this markup needs to work within different widths.
</div>
Try to Use Flex as that is the new standard of html5.
http://jsfiddle.net/maxspan/1b431hxm/
<div id="row1">
<div id="column1">I am column one</div>
<div id="column2">I am column two</div>
</div>
#row1{
display:flex;
flex-direction:row;
justify-content: space-around;
}
#column1{
display:flex;
flex-direction:column;
}
#column2{
display:flex;
flex-direction:column;
}
I removed the float from the second div to make it work.
http://jsfiddle.net/rhEyM/2/
Try this : (http://jsfiddle.net/TpqVx/)
.left-div {
float: left;
width: 100px;
/*height: 20px;*/
margin-right: 8px;
background-color: linen;
}
.right-div {
margin-left: 108px;
background-color: lime;
}
<div class="left-div">
</div>
<div class="right-div">
My requirements are <b>[A]</b> Content in the two divs should line up at the top, <b>[B]</b> Long text in right-div should not wrap underneath left-div, and <b>[C]</b> I do not want to specify a width of right-div. I don't want to set the width of right-div because this markup needs to work within different widths.
</div>
<div style='clear:both;'> </div>
Hints :
Just use float:left in your left-most div only.
No real reason to use height, but anyway...
Good practice to use <div 'clear:both'> </div> after your last div.