Putting some Images in a line - css

Here's a picture of my current situation :
alt text http://grab.by/FUM
But I don't want the images below each other, I want them in a line, a straight horizontal line.
This is the code I have currently:
<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-inside">
<div class="slice1"></div>
<div class="slice2"></div>
<div class="slice3"></div>
<div class="slice4"></div>
<div class="slice5"></div>
<div class="slice6"></div>
<div class="slice7"></div>
<div class="slice8"></div>
<div class="slice9"></div>
<div class="slice10"></div>
<div class="slice11"></div>
</span>
So how would I make all the images be in a straight line?

Try floating the images to the left. For example:
.image {
float: left;
}

You should set the class for all the divs to the same class, something like slices, and then go with:
.slices {
display: inline;
}

DIVs are block level elements and will cause each slice to be on it's own line. You can either change the display property of those divs to be inline, or use SPANs instead.

There's solutions to your problem, and then there's solutions to your problem.
The immediate fixup is to make the divs display:inline or float:left. Divs are naturally block which means each one will fill the entire width of their container, so they stack below each other. Inline makes them act like text and shrink to the size of their content, and sit next to each other. Floating works more-or-less similarly.
The better fixup is to avoid those divs altogether. Can you just use <img>? That's usually ideal.

Related

CSS Positioning: Creating exact overlap with negative margin is off by several pixels

I have 2 divs I want to exactly overlap horizontally using negative margin-left.
HTML:
<div id=one></div>
<div id=two></div>
CSS:
body{margin:0px;padding:0px,border:0px}
#one {width:100px;height:100px;background-color:red;}
#two {width:100px;height: 50px;background-color:blue;}
#one,#two{display:inline-block;}
#two{margin-left:-100px;}
Before negative margin each div is 100px wide:
After negative margin the divs are 4px from overlapping exactly:
Why does setting a negative margin on the second div not cause it to exactly overlap the first div?
BTW, I'm just experimenting with margin-left...I know I can absolutely position the 2 divs inside a relative wrapper.
Thanks in advance for any enlightenment!
Inline elements are sensitive to their structure in your HTML. Since both divs are separated by a line break, they have a small "margin" between them like letters in a sentence would (which is pretty much the point of inline elements).
<div id=one></div> <!-- Here -->
<div id=two></div>
Change the structure of your HTML to remove this space:
<div id=one></div><div id=two></div>
Or you can use comments to negate the line break:
<div id=one></div><!--
--><div id=two></div>
Inline block has weird "bug" you could call it, that applies a 4px space between elements assuming a default font-size. This is created from the line-break between your div's. You'll find that you can fix this quite simply by making your negative higher.
margin-left: -104px;
This will fix your issue, but it's also not the only way to fix it.
You could do this... Instead of:
<div id=one></div>
<div id=two></div>
Delete the line-break between the div's so they are this:
<div id=one></div><div id=two></div>
This will also fix the issue.
You could alternatively set the font-size of their containing element to 0.
HTML:
<div class="container">
<div id=one></div>
<div id=two></div>
</div>
CSS:
.container { font-size: 0; }
But wait! There is more. You could comment out the line-break.
<div id=one></div><!--
--><div id=two></div>
You could drop the ending > to the beginning of the next element.
<div id=one></div
><div id=two></div>

Effect of overflow:auto on floated divs

Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?
overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.
To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/
Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>​
DEMO
You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>

inserting image along with text

I am trying to insert an image along with text. when i insert the div, it puts the image on the next line. the div has a background image set to it. here is my code:
Chat Rooms <div class="dot"></div>
the text is aligned by center.
Use float with right or left options
Chat Rooms <div class="dot" style="float: right;"></div>
Browsers always place a line break before and after the element.
http://www.w3schools.com/tags/tag_div.asp
So you have to use the float attribute to get the desired result:
<div class="dot" style="float: left"></div>
Alternatively, you can do:
<p>Chat Rooms <img src="link to your image" alt="altext" /> </p>
you can do this way-
<div><span style="float:left;">chat room</span> <span class="dot"></span>
<div style="clear:both;"></div></div>
If I understand your problem correctly, your <div> goes to a new line because div tags, by default, have a display: block; property which tells them, put simply, to go on their own line and leave anything that is around them above or below themselves.
To correct this issue, you can either apply this bit of CSS to your document:
.dot {
display: inline;
}
Setting the div's display property to inline (and giving it a width and height alongside) should allow it to sit on the same line as the content that is around it. However, I suggest that you instead use an <img> tag, which already presents the correct behavior for cases such as yours.
For reference about the <img> tag, visit this link:
https://developer.mozilla.org/En/HTML/Element/Img

CSS float arbitrarily wrapping non-quirks mode despite having room

I have come across a weird problem where floated elements wrap to the next line when there is still plenty of space for them.
I realize this can be solved by removing the < p > or the < div > but I want clean valid code.
Most importantly I want to know why this is happening.
HTML:
<div class="section" style="width: 8000px;">
<div style="" class="bottom">
<div class="img6"></div>
<p class="n">
</p>
</div>
</div>
CSS:
p.n{margin:0;}
div.section{width: 8000px;}
div.section:after{content:"";display:block;clear:left;}
div.section div{float:left;}
a.b{display:block;float:left;}
div.img6{background:#933;width:78px;height:15px;}
a.t1{background:#123;width:74px;height:15px;}
a.t2{background:#456;width:86px;height:15px;}
a.t3{background:#555;width:92px;height:15px;}
a.t4{background:#786;width:126px;height:15px;}
Or you can see it here at JSbin
One interesting thing worth noting is that no matter how many elements you add only the last one is wrapped.
This is happening because the p is not floated left. If you inspect the elements with for example firebug, you will see that the wrapper div.bottom has the exact width of it´s largest, unfloated, block level element, p.n, 378px.
If you float p.n as well, your problem is solved.
The problem is that floating the .bottom div left reduces its width and therefore everything it contains. Try changing div.section div {float: left} to div.bottom div {float:left}.
If you need to float everything, consider floating the external content right and/or specify fixed widths.

Why float behave differently than other options when we give float to parent element to clear float?

In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)

Resources