http://jsfiddle.net/D9gnP/110/
Between both columns is a little gap.From where is that gap coming I have set nothing?
Has this todo something with the display:inline-block on those elements? Do they have internal margin?
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%; background-color:green;">
<div style="background-color:#ff99cc; height:25%;">1</div>
<div style="background-color:#ff33cc; height:50%;">2</div>
<div style="background-color:#ff66cc; height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%; background-color:violet">
<div style="background-color: orange;height:50%;">Total</div>
<div style="background-color: blue;height:50%;">Test</div>
</div>
</div>
</div>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
text-align:center;
text-indent:-0.5em;;
}
div span {
display:inline-block;
height:100%;
vertical-align:middle;
width:0;
}
As the elements are inline they are treated as such, including spaces due to white space.
Try removing the white space between the elements (including new lines).
<div>Content</div><!-- this white space/new line causes the gap -->
<div>Content</div>
<div>Content</div><div>Content</div><!-- no new line/white space, no gap-->
You can also add this to the container element to adjust:
word-spacing: 0;
alternatively you can just use floated elements :)
see here, works as expected if you just remove the whitespace: http://jsfiddle.net/D9gnP/121/
I think the whitespaces in your HTML markup - the indents between your tags - get interpreted by the browser. I had similar problems once while designing a horizontal navigation band.
Unfortunately, the only solution I found besides a completely different layout is writing your HTML markup without any whitespaces, which can get quite ugly.
Paste this code for your html:
<div id="wrapper" style="background-color:yellow;height:100%;">
<div style="width:50px;height:100%;display:inline-block;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
<div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
<div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="background-color:orange;height:50%;"> <span></span>Total</div>
<div style="background-color:white;height:50%;"><span></span>Test</div>
</div>
</div><div style="width:50px;height:100%;display:inline-block;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
<div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
<div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="background-color:orange;height:50%;"> <span></span>Total</div>
<div style="background-color:white;height:50%;"><span></span>Test</div>
</div>
</div>
</div>
notice that the 2 divs have nothing in between them in the source code.ex:
<div>data</div><div>data</div>
It is because of the white space in your HTML.
Try removing the break between the two column-divs and it's gone, or try this solution:
How to remove the space between inline-block elements?
Related
First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.
First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.
So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}
I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.
Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).
HTML:
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
CSS:
.divOne
{
border-top:10px solid black;
}
.divTwo
{
background-color: #32649b;
height:100%;
color:white;
}
jsfiddle:
Now, what I've learned from other versions of this question are that
float:left might be screwing it up
height:100% doesn't work if the parent's height is defined
position:relative might help on the parent
The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.
I can't really define parent height, because it'll be dynamic based on the children.
I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.
I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.
Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.
The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.
But, let's get a little more creative then that.
I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.
http://jsfiddle.net/Wexcode/13Lfqmjo/
HTML:
<div class="table-container">
<div class="table-row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
<div class="col-xs-6"></div>
</div>
</div>
CSS:
.table-container {
margin: 0 -15px;
}
.table-row {
display: table;
width: 100%;
}
.table-row [class^="col"] {
display: table-cell;
padding: 0 15px;
float: none;
}
Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).
You can add
display:flex;
to divOne , and will act like you wanted.
in bootstrap 4 'row' class applies this on div, but in ealier versions you need to add manually if you expect such behavior.
Give .divOne a display: flex and remove the height: 100% from .divTwo:
.divOne
{
border-top:10px solid black;
display: flex;
}
.divTwo
{
background-color: #32649b;
/*height:100%;*/
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
This is something that has been bugging me since the first time I learned HTML.
<style>
.test{
display:inline-block;
background-color:#aaa;
padding:5px 10px;
margin:0;
border:0;
}
</style>
<div class="test">Hello</div>
<div class="test">Woooorld</div>
<div class="test">HTML</div>
<div class="test">CSS</div>
I will definitely want to keep the elements in different lines, because else it becomes unreadable. But HTML turns the enters into spaces, which ruins the layout. Float causes a whole array of new problems or simply is not viable for what I am trying to do.
Is there really no better solution than to implement some hacky negative margins for everything except the first element?
Different ways to solve this problem.
link: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
1st Way:
<div class="test">Hello</div><div
class="test">Woooorld</div><div
class="test">HTML</div><div
class="test">CSS</div>
or
<div class="test">Hello</div
><div class="test">Woooorld</div
><div class="test">HTML</div
><div class="test">CSS</div>
2nd Way:
<div class="test">Hello</div><!--
--><div class="test">Woooorld</div><!--
--><div class="test">HTML</div>
<div class="test">CSS</div>
3rd Way:
use negative margins.
display: inline-block;
margin-right: -4px;
4th way
Skip the closing tag
<div class="test">Hello
<div class="test">Woooorld
<div class="test">HTML
<div class="test">CSS</div>
5th way
Set the font size to zero for a wrapper div.
6th way
Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another.
Just change your HTML slightly:
<div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div>
Demo. As all <div>-s in your current layout are inline-block elements, browsers are treating the whitespace between them as the same-class - inline - elements, allocating some visual space for them.
I would prefer to let the elements float instead of changing the HTML. CSS is for displaying.
Working:
<style>
.test{
display:inline-block;
float: left;
width:50px;
height:50px;
background-color:#aaa;
}
</style>
HTML:
<div class="test">asdasd</div>
<div class="test">asdasd</div>
<div class="test">asdasd</div>
<div class="test">asdasd</div>
My own solution is to have on-the-fly HTML minification through the PHP script - it strips all newlines and tabs from the HTML source before sending it to the browser (unless said whitespace is inside an element that renders whitespace literally, such as a textarea or any element with white-space:pre-wrap or similar)
Also should work...
<div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div>
Wrap your divs inside a container div and set the container font-size:0;, then set the child divs font-size:14pt for example, This solves your issue.
And here is a working fiddle
When I use the following code, the last div overlaps the floated content:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>
The common fix is to do this:
<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>
However, in my case, I cannot add in an extra element. Is there another workaround for this?
Edit:
clear:both; fixed the overlapping issue, but there's a margin on the last div, so it's something like this:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>
And now the new problem is that the margin isn't showing up.
You could simply clear the floats...
<div style="background:red;clear: both;">test</div>
Try the following:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>
EDIT. To get the margin-top, add margin bottom to the floated elements
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>
Set the clear property on your last <div> to left or both:
<div style="background: red; clear: left;">test</div>
Edit: As for the margin, you can do some relative positioning:
<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>
There's no need to use floats here. Make the first two elements inline-block elements, and the third element a block-level element.
HTML:
<div class="inline-block">
Test
</div><div class="inline-block">
Test
</div>
<div class="block">Test</div>
Note that </div><div class="inline-block"> are touching. Because these two element are inline-block elements, any space in the markup will produce space in the presentation.
CSS:
.inline-block {
width: 50%;
display: inline-block; }
.block { margin: 50px 0 0; }
Preview: http://jsfiddle.net/Wexcode/eGPWt/
EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc
First of all, here is a picture I have made in photoshop to demonstrate my problem: http://richardknop.com/pict.jpg
Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):
<div class="left">
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
</div>
<div class="right">
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
</div>
<div class="clear"></div>
<div class="box">
//
// NOW THIS BOX HAS NO TOP MARGIN
//
</div>
<div class="box">
// box content
</div>
And CSS styles go like this:
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.box {
overflow: auto;
margin-top: 10px;
}
Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.
Any idea where could be the problem?
See if padding-top: 10px works. It might be that the margin is trying to go from the top of the page.
I think this is an IE8 bug. Relates to a sibling element of a floated left and right div. With or without a clearing div, the final unfloated element loses its top margin in IE8.
We've tested this, and only IE8 gets it wrong:
http://www.inventpartners.com/content/ie8_margin_top_bug
We also came up with 3 solutions.
Try closing your clear div.
<div class="clear"></div>
I don't quite get this approach. You could wrap the <div>s with class right and left in another <div> and apply overflow: hidden, width: 100% to it so that the elements below floated elements will get displayed correctly.
enter code hereTry using a container with a width with overflow:hidden around the floated divs, and remove the cleared div.
<div id="container">
<div class="left">
<div class="box"> // box content </div>
<div class="box"> // box content </div>
<div class="box"> // box content </div>
</div>
<div class="right">
<div class="box"> // box content right </div>
<div class="box"> // box content </div>
<div class="box"> // box content </div>
</div>
</div>
<div class="box"> // // NOW THIS BOX HAS NO TOP MARGIN //</div>
<div class="box"> // box content</div>
And the CSS
#container { width: 100%; overflow: hidden; }
(sorry, I left IE7 on my work machine for testing so I can't verify)
I have similar problems, and the solutions provided by Matt Bradley did not work for me (but thanks for posting it anyway!). I wanted to have margin-top:10px on a h1 element.
The solution I came up with was by adding position:relative , top:10px and margin-top:0px to the h1 element.
I don't have IE8 with me... but did you try adding clear: both to the bottom div and adding a bottom margin to one of the top floats? I'm pretty sure that would achieve the same effect without any extra divs.