This is live demo: http://jsfiddle.net/9Y7Cm/5/
Everything is fine with that, until the text width there is higher than the div width.
If you will add some text there, the line will break and the text will be displayed under of the image instead of next to the image (as you can see in my first fiddle).
Here you can see what happends, it text width is higher than div container width:
http://jsfiddle.net/9Y7Cm/12/
Is there a way to fix that?
Give your right side content a width and float it to the right, like so:
http://jsfiddle.net/9Y7Cm/14/
For a cleaner result, i suggest you separate both sides of your content, left and right, with a class and width and then float them to set them side by side.
Just remove display:inline-block; from the CSS for the span element (jsFiddle example).
More information on display:inline-block.
inline-block: This value 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.
The problem is with display:inline-block for the span. Remove it, and the text will be on the same line
Related
I need to place two repeated background images on the left and right border of a div. I don't know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.
This is my layout:
http://jsfiddle.net/WmLhV/
In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break...
Is there any better way of putting an image to the right? even without a float?
your div with right align doesn't have height if you want to use 100% height you have to use position. check this fiddle i have done this via position http://jsfiddle.net/WmLhV/4/
Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.
One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.
A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.
I have a div and that div has a height of 200px. Inside the div there is text and I don't want the div to have scrollbars therefore I've set overflow:hidden.
Now, inside that div there is a also a list, acting as a dropdown box. When you click on the list/dropdown box, I want it to come on TOP of the main div.
Here is an example with the main div to overflow:hidden:
And this is an example without overflow:hidden. So I want the following but the text not overflowing.
jsFiddle: http://jsfiddle.net/w8kQA/
You could set the overflow:hidden on the element inside the box, instead of on the box itself:
http://jsfiddle.net/w8kQA/1/
In the comments above, you mention that you have 20 boxes inside a div.
If that is the case then I would wrap the #box and the .list inside of a holder div. That way you can achive your layout and still have multiple boxes in a div.
JSFiddle: http://jsfiddle.net/w8kQA/2/
You can also reduce the max-height of your list to fit into the div.
http://jsfiddle.net/etienne_carre/w8kQA/4/
You can do it like this: http://jsfiddle.net/w8kQA/7/
I'm dealing with a text who goes out of its div. I've coded the frontpage. So, no matter how long the main content is, it should force the sub-content (the grey area and the footer) to move down.
You see how the dummy text is acting
URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm
I've accomplish this before but somehow it's not working now.
You've set an explicit height on that div. For it to reshape itself to its content, you'll need to set height:auto. (or never set its height in the first place)
EDIT: As ANeve said, you'll need to remove the height on both .article and .opentext, as well you'll need to put a clear:left on .lower-container to push the footer down.
If you have an element that only contains floating elements, the container's height will be zero. To fix this you can add a clearing div (<div style="clear:both"></div>).
If you add a clearing div at the end of the #under-content section, it will automatically adjust the height of the section to it's contents.
The other issue you have is that you are using relative positioning on your .opentext div elements. When you set a 'top' property, it actually pushes the content down, causing it to overlap with your #lower-container. You're better off using the 'margin-top' property, which will expand the size the .opentext div to fit all the contents.
So in short:
Add <div style="clear:both"></div> at the end of the #under-content <section>
Change the 'top:82px' to 'margin-top:82px' on your .opentext div
I hope this helps!
Just use wordwrap: break-word; for the div and it will break the word to the next line.
You have set the height property of your .article and .opentext divs. If you remove this property, the content should expand accordingly.
However, you will also need to adjust the positioning of your background image. You should set the background image of .footer itself, rather than relying on one statically-sized background image for the entire page.
I'm trying for the life of me to figure out what should be an excruciatingly simple CSS task: aligning a block of text to the right of an image and vertically positioning the block so it aligns with the bottom of the image; and I'd prefer to not have to declare a height for the containing element as this is for a lengthy image listing and the dimensions will vary (but all with a certain max width/height). I've attempted to define a parent element with "position:relative" containing two left-floated divs, one with the image and the other with the text block, positioned "absolute" and "bottom:0" and I can't seem to get the text block to align with the bottom of the image...
any assistance here may very well help me stave off a fit of insanity ;)
If the text go to the right of the image, just use an element with display:inline-block after the image, and enclose everything in a block (like div). See it here
I have 1 span within a container div. I want the span floated to the right. The content within the div and the span should be on one line.
In Firefox, that's how it displays.
But in IE, the span is displayed on a new line:
http://i48.tinypic.com/etzg5f.png
Why do the browsers display the content differently?
You should float the other content to the left. So have two floats; left and right.
Another approach could be using position absolute on the span, andposition relative on the surrounding div. Then you could put the positions (top, left, right and bottom) and position the elements as you should!
You could probably get away with specifying a width on your .catalogSelection#top #rss style definition. When setting the element to float it considers it a block level element and since your existing text is not floated, it wraps to the next line. Either this, or you need to float your Choose Catalog text to the left as well. Or as Kevin suggested, you can just put your Floated elements to the left of the non-floated, but this can be an issue when it comes to screen readers as it reads from left to right in your code, and is not semantically correct.