Hellas,
I'm having a styling issue in IE8. The goal is to have two div's in one row without setting a width (div should expand with text). It's working in all browser except for IE. Here the span element I'm floating inside the divs stretches each div to max-width forcing the other div to start in the next row. Here's the jsfiddle demo:
http://jsfiddle.net/TFnsV/
I could not make it work with this html structure in IE7, (In IE8 it works for me).
But you can change the HTML a little like this:
<div>
<h2><span class="left">Test one two three</span>
<span class="right">USD</span>
</h2>
<p>Test test test</p>
</div>
And the css:
.right{
width: 20px;
}
.left{
float:left;
}
Look at this: http://jsfiddle.net/Zn8cU/
EDIT: you can add this:
h2{
text-align:right;
}
The updated example:
http://jsfiddle.net/5bgH2/
Related
I am trying to build a horizontal scrolling layout, composed of image blocks:
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
I used display:inline-block and white-space: nowrap; properties to achieve this, and it does work but browsers don't seem to recompute block widths on resize?
Check here: https://jsfiddle.net/g597w3Lr/2/ and try resizing the browser..
Here is a screen grab to better understand what is my problem:
https://youtu.be/VxKo4gysc1o
At first all images are well positioned and i can scroll horizontally: perfect.
I then resize the browser
images are resizing, not the .item wrappers. White gaps appear :(
Basically i was expecting same feature as with vertical scrolling, i.e. adapting width depending on content size.
I actually dont even understand the logic here..
Is there any way to get over this?
Thanks!
Original answer
EDIT 2: Looking at your video I think the new approach is what you are looking for.
You have to display your divs with .item class as inline and remove your white-space: normal property.
.item {
display: inline;
height:100%;
}
Updated JSFiddle.
Explanation:
I am not an expert of CSS so if someone see some mistake please correct me.
When you display an element as inline-block as the official documentation says:
inline-block
Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
which means that the element that you display as inline-block acts like a block but you can set it inline (in the same line). This means that you can set a div (which is display: block as default) in a single line. You can also see it here:
The div element, short for division, is the block level generic container.
Also, inline elements cannot get height/width properties so this is the reason why when you display your divs with .item class as inline, they wrap the content but not get the height/width that they should correspond to take (from their parents in your case, as you put them with %).
If you display them as inline-block it does not changes anything about their default height/width properties. Just allows you to display them in a single line.
JSFiddle to see the three divs (inline/ inline-block / block, as default).
You will have to modify slightly your css
HTML
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
CSS
html,body {
height:auto;
}
.container {
display: inline-block;
white-space: nowrap;
height:auto;
}
.item {
display: inline-block;
white-space: normal;
}
.item img {
width:100%;
height:100%;
}
Fiddle
check it see that's what you want ?
I manage your classes with border:solid 1px red;
and use width:100% in some classes.
also in class item:
width:100%;
https://jsfiddle.net/g597w3Lr/6/
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
I've been reading about how elements with the float attribute do not have their height accounted for. Therefore, I should use clear:both right before the end of the parent div so that it will stretch over the entire inner div.
You can see on This Page that the div with the id full-height-template-container is not stretching over its inner content, and therefore the footer (copyright text on the bottom right) is coming up too high on the page.
The layout looks like this:
<div id="full-height-template-containter">
<div id="content-container">
<div id="full-width" style="float:left;">
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
What else can I try in order to make the outer div stretch over its children?
Thanks in advance!
That's a common problem. To solve it, the clearfix hack in its many variants was invented.
I was confronting the same issue until I inserted this version of "Clearfix" at the top of the container that needs to be stretched as such:
CSS:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML:
<div class="clearfix"> </div>
<span class="doc">
John Nixon
Henry Wright
</span>
In #full-height-template-container you are using height: 100% which means the div takes 100% height of the parent.
If we track back in your CSS each parent element is assigned height: 100%, including the html and body elements, which means that the height is taken from the window - so as a result the div will never exceed the size of the window (but content will still overflow).
So it is not the floats that are causing the problem, it is the height you are explicitly assigning to each div.
i put your sample on fiddle and gave it some css to show the divs:
http://jsfiddle.net/WRzsE/
You can clearly see that it works perfectly as you describe you would expect it to. You are doing something else wrong i suspect...
Perhaps you are using a position: absolute somewhere, wich would cause the elemnt to be lifted out of its parent, and would make the parent not stretch (just thinking out loud here...)
edit:
I just took a look at the actual page (overlooked the link). Your div's are stretching just fine. The problem is with the positioning of your footer, wich is set to absolute. I suspect you are trying to achieve a sticky footer, have a look at this, works like a charm. I use it all the time: http://ryanfait.com/sticky-footer/
So I noticed the column property doesn't work in internet explorer so I tried finding alternate ways to create columns, I found a way to do it with tables, but that looks a bit clunky. Is there a way to use divs and create two vertical columns splitting the page?
You can do this easily with floats. e.g.:
HTML:
<div class="col1">Column1</div>
<div class="col2">Column2</div>
CSS:
.col1 { width: 50%; height:100px; float:left; background:#ddd}
.col2 { width: 50%; height:100px; float:left; background:#777}
Demo: http://jsfiddle.net/AfgAG/9/
You can put two div tags next to each other and give one the float:left CSS property, and the other float:right. Both of those divs must be at the same level in your DOM tree. What I mean by that: basically, both div tags must be 'next' to each other when you write the HTML, so that one is not inside of a tag that the other is not. For example:
<div> stuff </div> <div> more stuff </div> is okay, but
<div> stuff </div> <div> <div> more stuff </div> </div> would require the outer div tags to be labeled with float:left or float:right, not the inner div that directly contains 'more stuff'.
Hope that helps!
You can use column-count although not in IE before 10. With prefixes it works in everything else.
Is float not working for you?
again a problem with IE browsers version 6 and 7
Take a look at an example right away, try resizing the window and such.
a preview (easier to open in IE this way)
code
HTML:
<div class="container">
<div class="left-menu">
<ul>
<li>El1</li>
<li>Element 2</li>
<li>3</li>
</ul>
</div>
<div style="margin-right: 60px;">Тест Тест</div>
</div>
CSS:
.container{
position:absolute;
top:100px;
left:100px;
outline: 1px solid red;
background-color:pink;
}
.left-menu{
outline: 1px solid green;
background-color:#AAA;
width: 50px;
float: right;
}
Now I don't understand 2 things
What happens to the float element? the box is never too small, infact the margin of the adjacent div is bigger than the width of ul div. But when the window is small enough the float element appears to be floating to the window edge not its container edge, but if you scroll a little to the right when the window is small you will see the container is wide enough.
Less important issue why is it this wide? Shouldn't it be as wide as it's contents?
The only fix I've come up with is to give my absolute div a width, but there is the problem. It should resize with the contents say if there is a picture near the float div.
And there will be a picture =) This width workaround of course allows to use tons of javascript, to resize every element in the more complex structure than shown in the example, but i wonder may css be used instead?
Internet Explorer has issues with divs and floats, especially older versions of IE. Whenever I have problems with floats and divs not clearing each other properly, I rely on the Clearfix method.
Add the clearfix css to your main css file, then append the class .clearfix to .container so it looks like <div class="container clearfix">.
For the 2 divs inside, take the margins and widths off of them, if you want those 2 divs width to change based on the content inside them. Float one div left, and float the other div right.
You'll see that the Clearfix forces the parent div (.container) to wrap all the way around the floated elements inside.
Hope this helps!