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>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
<style>
#main {
width: 110px;
height: 110px;
}
#main div {
width:50px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
</style>
<div id='main'>
<div>x</div>
<div>x</div>
<div>x</div>
<div></div>
</div>
I have a grid of divs set up just a like a checker board. The divs are either empty, or have a single unicode character inside of them.
When a character is removed from or added to the div, the spacing around the div is affected. (see snippet)
How can I stop this behavior? I would like for the content inside of the div to not affect the positioning or spacing around the div.
you can fix your code by adding vertical-align:top to your inner 4 divs
Don't use the display:inline-block, try with display:flex on the outer div.
Basic concepts of flexbox
This issue occurs because of the way that vertical-align is calculated. When no vertical-align is set, the default is baseline. However, when there is no text, baseline is calculated differently. See this answer.
Using FlexBox, as suggested by most of the other answers would obviously avoid this issue.
If you want to avoid FlexBox, probably the best option is to just set vertical-align explicitly, as suggested in DCR's answer.
Another method would be to wrap the inner text in a <span> and add position: absolute. This way, all the boxes effectively have the same size content, and the discrepancy is resolved. Here's an example:
<style>
#main {
width: 110px;
height: 110px;
}
#main div {
position:relative;
width:50px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
#main div span {
position: absolute
}
</style>
<div id='main'>
<div><span>x</span></div>
<div><span>x</span></div>
<div><span>x</span></div>
<div><span></span></div>
</div>
Like Nicola Revelant said in their answer, you can use something like flexbox to make this work. Here's an example:
<style>
#main {
width: 110px;
height: 110px;
display: flex;
}
#main div {
display: flex;
flex-direction: column;
}
#main div div {
width: 50px;
height: 50px;
border: solid 1px black;
}
</style>
<div id='main'>
<div class="row1">
<div>x</div>
<div>x</div>
</div>
<div class="row2">
<div></div>
<div></div>
</div>
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
Container is pulled down when inner element puts top margin so white section appear at the top of page. How can i prevent that white section ?
.container {
background: red;
height: 500px;
}
.inner {
margin-top: 100px;
height: 50px;
background: yellow;
}
Why there is white section in here ??
<div class="container">
<div class="inner"></div>
</div>
Set the overflow to auto on the outer element. You're seeing collapsing margins in your example
Parent and first/last child - If there is no border, padding, inline
part, block formatting context created, or clearance to separate the
margin-top of a block from the margin-top of its first child block; or
no border, padding, inline content, height, min-height, or max-height
to separate the margin-bottom of a block from the margin-bottom of its
last child, then those margins collapse. The collapsed margin ends up
outside the parent.
.container {
background: red;
height: 500px;
overflow: auto;
}
.inner {
margin-top: 100px;
height: 50px;
background: yellow;
}
Why there is white section in here ??
<div class="container">
<div class="inner"></div>
</div>
The result you are getting is expected due to the CSS Box Model.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
Explanation of the different parts of the Box Model:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
See the difference between margin and padding illustrated in this snippet:
.container {
background: red;
height: 500px;
}
.inner {
height: 50px;
background: yellow;
}
.margin {
margin-top: 100px;
}
.padding {
padding-top: 100px;
}
<div class="container">
<div class="inner margin">
Inner div has a margin-top
</div>
</div>
<hr>
<div class="container">
<div class="inner padding">
Inner div has a padding-top
</div>
</div>
<hr>
<div class="container">
<div class="inner">
Inner div has no padding/margin
</div>
</div>
Remove the margin-top:100px on the div .inner
You can also use margin-top: 0; , or top:0; but it is not necessary...
DEMO
Try this:
html,body {margin:0}
.container {
background: red;
height: 500px;
}
.inner {
/*margin-top: 100px;*/
/*margin-top: 0;*/
/*top:0;*/
height: 50px;
background: yellow;
}
// ---------------
<div class="container">
<div class="inner"></div>
</div>
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.
What is the easiest way to align a div to center widthout using position. i have 3 div and i want to set center of page with using CSS
<!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
float:right;
}
</style>
<body>
<div id="content">
content 1
</div>
<div id="content">
content 2
</div>
<div id="content">
content 3
</div>
</body>
</html>
You are using same ids multiple time. ids must be unique.
Use class instead.
Wrap all content divs in an element:
HTML:
<div class="container">
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
</div>
CSS:
.container {
width:606px; /* (200*3) = 600 + (6px for borders) */
margin:0 auto;
}
.content {
width: 200px;
height: 200px;
border: 1px solid #000;
float:left;
}
DEMO here.
First of all, don't use ID like class, you can repeat ID so many times but it's a bad practice.
And I'm not sure if I understood it right, but remove float:right from your css which will get your div's one below another. You can see output fiddle
Here is the css with few line of code
.container{width:100%;}
.container div{border:1px solid red;margin:0 auto;width:200px;}
Give it a width and do margin: 0 auto;
Ow, and use an unique id.
first of all you are using "id" selector for 3 elements/containers which is wrong.
replace the style with below snippet
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
}
</style>
i just have removed the floating (which forcing your containers to be on right)
Wrap divs with a parent div and add margin:0 auto
.wrapper{
width:200px;
margin:0 auto;
border:solid 2px red
}
.content{
background:grey;
}
DEMO
You want to modify your code as less as possible?
Then you might want to delete your floating:
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
/*float:right;*/
}
Because you are using a margin to center the element, a float is not neccesary. A float will only put the element out of the flow(so basically the <body> doesn't see these elements as his content, which results that the elements cannot center them selves from their parent. There is no parent of the same flow!)
jsFiddle
It is also a good call to not use the same IDs. IDs should always be unique
However same IDs are supported by CSS, but it is a good practice to use unique IDs from now on.
You can use the margin: 0 auto; on the element which has to be placed in the center. However in order to do this the element must have some sort of a wrapper(not "body") to be able to use the auto setting.
<html>
<head>
</head>
<body>
<div id="page_wrapper">
<div id="div_1" class="centered_div">foo</div>
<div id="div_2" class="centered_div">foo</div>
<div id="div_3" class="centered_div">foo</div>
</div>
</body>
</html>
CSS:
#page_wrapper{
width:100%;
}
.centered_div{
margin: 0 auto;
}
This centers all elements which have the class centered_div to the middle of their parent.
Other option is to used fixed canter position. For example if you're creating a popup notification message, this might be a way to go.
.notification_window{
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
But if it's just a regular page element like a div with some content use the first example.
If you need any further explanations please comment.
This question already has answers here:
2 column div layout: right column with fixed width, left fluid
(8 answers)
Closed 8 years ago.
Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space.
Does anyone happen to know if this can be done?
My attempt (renders block2 underneath block1):
<style>
.block1 {
width: auto;
height: 200px;
background-color: green;
}
.block2 {
float: right;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You can do it like this:
HTML:
<div class="right">right</div>
<div class="left">left</div>
CSS:
.left{
background:red;
}
.right{
float:right;
width:200px;
background:green
}
Check this live example http://jsfiddle.net/QHTeS/2/
Float Both of the elements left:
<style>
.block1 {
width: auto;
height: 200px;
float: left;
background-color: green;
}
.block2 {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You should wrap them in a container as well to prevent messing up the rest of your layout. :)
http://jsfiddle.net/tcFjN/
That was wrong!
Use display: table; on parent and display: table-cell; on children:
<div id="wrapper">
<div class="block1">test1</div>
<div class="block2">test2</div>
</div>
#wrapper
{
display: table;
width: 100%;
}
.block1 {
width: auto;
height: 200px;
display: table-cell;
background-color: green;
}
.block2 {
display: table-cell;
height: 200px;
width: 200px;
background-color: red;
}
http://jsfiddle.net/tcFjN/1/
This is my solution without floats. The only caveat is that I need to use a wrapper. So, if the desired HTML is
parent (has a border, margin, padding,...)
left (fixed width)
right (variable width, fill the entire space)
I must rewrite it as
parent (has a border, margin, padding,...)
wrapper (has no styling)
left (fixed width)
right (variable eidthm, fill the entire space)
My HTML is
<div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
<div style="">
<div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
<div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
</div>
</div>
The main points here are:
No use display:table because then we can not set the border
The use of min-width, max-width
The use of width:100%
Check this jsfiddle
Start out with a container <div> (#container) that holds both the left and right <div>s. Float one <div> to the right and give it a specific width (320px in my example). Then give the other <div> an absolute position starting at the absolute left (0px) and ending at the left edge of the <div> on the right (320px).
If you adjust the width of #container, the right <div> will remain fixed at 320px while the left <div> will expand to fill whatever the remaining area is.