I am having difficulties in understanding the nature of table and table-cell when used in css.
Consider the following: http://jsfiddle.net/dd7h7/3/.
HTML
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
CSS
.widget {
display:block;
margin:0px;
padding:0px;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
}
.content {
display:table;
width:100%;
height:100%;
margin:0px;
padding:0px;
border-spacing:0;
border-collapse:collapse;
}
.icon {
display:table-cell;
width:15px;
height:15px;
margin:0px;
padding:0px;
vertical-align:middle;
text-align:center;
}
.label {
display:table-cell;
margin:0px;
padding:0px;
padding-left:3px;
vertical-align:middle;
}
Im trying to make a widget containing some buttons, that are positioned alongside each other. But I don't understand where the space between the red boxes comes from. How do I get rid of it?
Thanks
Inline elements (in your case the .button divs) are sensitive to white space, you can get rid of that space in a variety of ways, including:
Removing the space between the elements
Using HTML comments (<!-- -->) to occupy the gap
Floating the elements left
Example of removing the white space between elements:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using HTML comments:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using float:
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float:left;
}
jsFiddle example
So in short this really doesn't have to do with display:table-cell but everything to do with display:inline and inline-block.
in this fiddle i removed the space simply using
float:left;
http://jsfiddle.net/dd7h7/5/
inline-block is adding that unnecessary space.
You can do a little trick with font size:
.widget {
display:block;
margin:0px;
padding:0px;
font-size: 0;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
font-size: initial;
}
I think you should add
float:left
to
.button
so CSS should be like this
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float: left;
}
Hope, that will help. :)
Related
My footer was at the bottom of the page, until I added a few more divs before it. I am not sure why this threw my code. I do not want to use position: fixed because I want it to be at the bottom, but to be seen only when scrolled down to, like the footer on this page.
.gallerybox {
border: 4px solid rgba(54, 215, 183, 1);
width:30%;
height:200px;
float:left;
margin-left:10px;
margin-bottom:10px;
}
#footer {
width:100%;
height:100px;
background-color:lightgray;
bottom:0;
left:0;
position:relative;
}
<div id="holder">
<div id="body">
<p id="gallery">The Gallery</p>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<br>
<div id="footer">FOOTER</div>
</div>
</div>
Please never use float property to position multiple div.
Use display: flex to achieve the same in the best way possible.
I think this is what you want
.container{
display:flex;
flex-direction:column;
}
.gallery{
display:flex;
flex-wrap:wrap;
}
.gallerybox {
border: 4px solid rgba(54, 215, 183, 1);
width:30%;
height:200px;
margin-left:10px;
margin-bottom:10px;
}
#footer {
width:100%;
height:100px;
background-color:lightgray;
}
<div id="holder">
<p>The Gallery</p>
<div class="container">
<div class="gallery">
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
</div>
<div id="footer">FOOTER</div>
</div>
</div>
I have included the display: flex property and removed the float: left which was creating the issue also added some subtle changes to the HTML structure.
I recommend you Learning about flexbox it will make positioning and structuring HTML with CSS so much easy and understandable.
Do tell me whether I was of any Help :)
Currently, my div content is in horizontal style, I want to make the another div content to be position vertically. For my case i want to vertically align my content1 element
This is how i want the css to look like
This is my html code:
<div id="binder">
<div id="content">
<div>
<h1>Title</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
</div>
<div id="sidebar">
</div>
</div>
This the css code:
#binder{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#content{
font:14px Calibri;
border:1px solid #3EA99F;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#sideBar{
border:1px solid #3EA99F;
width:450px;
margin:20px;
padding:30px;
background:#3EA99F;
}
How to do it?
Eventually you can do it without using flexbox too.
Code example:
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.content-wrapper,
#sidebar{
float: left;
}
.content-wrapper{
width:70%;
}
#content,
#content1,
#sidebar {
border: 1px solid red;
}
#sidebar {
width: 30%;
}
<div id="binder">
<div class="content-wrapper">
<div id="content">
<div>
<h1>Content div</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
<h3>
Content1 div
</h3>
</div>
</div>
<div id="sidebar">
<h3>
Sidebar div
</h3>
</div>
</div>
Notes
I added a .container-wrapper div as parent of both #content and #content1
I placed .container-wrapper and #sidebar next to each other with float:left
In this case the height of the containers is set automatically based on their content, but if you want you can specify a fixed value adding a height:..px to the corresponding class/id
change
#binder{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
to
#binder{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
as the explanation is not much enough, please check the JsFiddle and please explain if it is not as you expected
EDIT:
Thank you for providing the images.
change the html into
<div id="binder">
<div class="content-wrapper">
<div id="content">
<div>
<h1>Title</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
CONTENT 1
</div>
</div>
<div id="sidebar">
SIDEBAR
</div>
change the css to
#binder{
display:flex;
flex-direction: row;
}
.content-wrapper{
display:flex;
flex-direction: column;
}
#sidebar{
font:14px Calibri;
border:1px solid #3EA99F;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
check the jsFiddle for more
I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.
You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
I have five columns which I aligned using display:inline-block It works fine, but there is one problem. When I refresh the page for about 4 or 5 times while the first column is on the top the other 4 columns go to the bottom of it and when I refresh again it gets back to its original place. I couldn't figure out what is causing this and the content inside the columns are coming from database. can someone give me hint?
CSS
.col1
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col2
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col3
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col4
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col5
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col_content_wrap
{
background-color:#fff;
border:1px solid #ddd;
border-radius:5px 5px 5px 5px;
box-shadow:4px 4px 1px #eee;
margin-bottom:10px;
}
.imgwrap
{
height:169px;
position:relative;
width:223px;
}
.price_wrap
{
border-top:1px solid silver;
height:50px;
}
.price
{
float:right;
margin:10px;
}
HTML
<div clas="col1">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col2">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col3">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col4">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col5">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
You are missing an endquote for each of the <div class="col_content_wrap> elements.
Also, in each of your html blocks, you have 5 <div>'s and only 4 </div>'s
Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.
However if I use float:left and float:right twice, I get the following:
ELEMENT ELEMENT
ELEMENT ELEMENT
rather than
ELEMENT ELEMENT
ELEMENT ELEMENT
This is because, when I float for the second time the css floats for the remaining space left.
How do I fix this bug?
You can use clear:both; with float:left; property.
Try Jsbin demo
.left {
float:left;
width:40%;
height:240px;
border:1px solid red;
}
.right {
float:right;
width:40%;
border:1px solid red;
height:240px;
}
.elem1 {
float:left;
margin-bottom:20px;
}
.elem2 {
float:left;
clear:both;
}
.elem3 {
float:left;
margin-bottom:20px;
}
.elem4 {
float:left;
clear:both;
}
<div class="left">
<div class="elem1">element 1</div>
<div class="elem2">element 2</div>
</div>
<div class="right">
<div class="elem3">element3</div>
<div class="elem4">element4</div>
</div>
What you need is a clear: both in your CSS.
Your floats are working fine, but there is not enough content to push the next elements below the first elements. If you set them to clear, then they will.
Try this one:
Markup:
<div class='clear:both'>
<!-- left container -->
<div style = "float:left;">
<div style = "float:left;">
Element
</div>
<div style = "float:left; clear:left;">
Element
</div>
</div>
<!-- right container -->
<div style = "float:right">
<div style = "float:right;">
Element
</div>
<div style = "float:right; clear:right;">
Element
</div>
</div>
Please use your own external style, this is just to guide you.
Please have a look here on jsfiddle
.wrapper {
height:100px;
border:1px solid red;
margin: 5px;
}
.left {
margin: 10px;
float:left;
width: 45%;
}
.right {
margin: 10px;
float:right;
width: 45%;
}
<div class="wrapper">
<div class="left">element 1</div>
<div class="right">element 2</div>
</div>
<div class="wrapper">
<div class="left">element3</div>
<div class="right">element4</div>
</div>
This works for me.
.right {
float:right;
}
.left {
float:left;
}
<div>
<div class="right">1 element</div>
<div style="clear:both"></div>
<div class="right">1 element</div>
<div class="left">1 element</div>
<div style="clear:both"></div>
<div class="left">1 element</div>
</div>
Here is the fiddle. http://jsfiddle.net/nQvEW/143/