I just designed a portfolio website. I have a whole array of images that I want to keep in one line (with horizontal scroll). This only happens when I have set a fixed width for the surrounding div (in this case with class '.post-images'), wide enough to contain all images. This could be just fine if the amount of images and their widths wasn't dynamic. Unfortunately this isn't the case here. I want this div to be wrapping around all images and not causing them to float. I have tried to set the div's where I put each image in ('.post-image') to 'white-space: nowrap' to no avail.
See an example here: Link
How can I fix this problem? I hope someone is willing to give me a hand here ;)
Thanks,
Jeroen
Replace the css for .post_images and .post_image with:
.post_images { white-space:nowrap; }
.post_image { display:inline; }
Effectively, this makes the wrapping <div class="post_image"> elements redundant (that's the display:inline); you may as well remove them.
In general, most elements size their width according to that of their container; if you wish an element to size according to content, you'll need a <table>, display: table or single line.
Edit: both white-space:nowrap and display:inline have been supported on all major browsers for years (in IE, all the way back to IE 5.5).
Related
Issue
I need to vertically center the order_form div (light gray) and keep it on the very right side of each of the product boxes on our website. The div's height is non-fixed, and can occasionally fill most of its allowed vertical space (which is 160px because of the product image). The picture div vertical-aligns perfectly. I made an example out of one product box and simplified it as much as possible while leaving its html intact.
Here's a jsfiddle displaying the problem (sorry for the lack of images!)
I realize there are a lot of posts on this topic; I've read many of them. I've tried everything I could think of, and everything I have found in all the articles, solved questions, even every little clue I've found over the past three+ hours. Nothing has worked.
I'm completely lost on how to solve this, and I'm sorely tempted to change the picture and order_form divs to a table just for the sake of aligning ._.
Help?
Several things I've tried:
display: table-cell; vertical-align:middle; on the order_form div, and adding display:table to its parent.
The above with display:table on an added wrapper div instead.
adding a wrapper div and using margin + negative margin.
display:table-cell; vertical-align:middle; and adding a wrapper div with left:160px; display:table. The wrapper div's width is never correct, breaking the order_form.
vertical-align:middle on the order_form and having height equal to line-height on its container
several other approaches i do not remember
saying please.
Asides
I need this to be functional on somewhat older browsers (ex: IE8), without using any javascript.
Background info: I've recently started working on our site and, among other things, I've since converted all the product boxes from tables to divs and cleaned up the css a bit. The problem is the tables, being tables, handled the aligning really well...
Also: The next step is to convert the buttons from images to prettyful css links so they scale nicely along with the text (and ditch the table there, too). Don't dock me points for what I haven't touched yet!
If I understand the question rightly, one option would be to set div.order_form to display: table; height: 160px; and then create a div inside that (wrapping around all its content) and give that inner div display: table-cell. That still requires the use of the absolute positioning, which isn't ideal, but it does work.
If you want this on old browsers too..
wanna use some jquery scripts?
The height will auto adjust depending on your order_form height.
See DEMO on jsfiddle http://jsfiddle.net/kdNnw/
JQUERY
$(document).ready(function() {
// get dynamic height of order_form and calsulate margin-top css
var ver_top = ( 160 - $('.order_form').height()) / 2;
$('.order_form').css( "margin-top", ver_top+'px' );
});
I have emoticons in a css sprite image that I want to display within text, so I have spans inserted with background definitions but as these spans are inline elements I can not define the width and height.
The only thing I could think of is make them block elements and float left, but I'm not sure if this is the best approach. What do you think is the best way to do this?
try to use the css property and value display: inline-block
I do not think that display: inline-block is supported enough to rely on. Obviously I am talking about <=IE7, and possibly other mobile devices. Which unfortunately are still in use. However there comes a point when one stops supporting IE.
I would try using a div floated, with background attributes set. Failing that a single image.
I'm fairly new to HTML5 and I don't understand the purpose of different elements very well. I'm trying to use section as wrapper and I'm having a problem of the section not spanning all the way across.
Can you please go to the following web address:
[removed due to solved question]
I want the section to span all the way across the page to cover full width. But when I give it a 100% with, it simply disregards the width taken up by nav and floats down. Is there a way to make the section span across the remaining space in the screen?
Thanks very much
You appear to have floated it left. Getting rid of the float: left rule in section#Maincontainer should fix it.
If i understood correctly what you want to span across is the menu section .. now percentage width is always relative to its container .. so if the container`s width was 900px then the elements inside if had a 100% width will have 900px
i have used this css code and it worked fine
section#maincontainer {
width: " put the value here";
}
now usually if you dont specify a width, the elements takes all the space available, but in your case you have specified a float which forces the element in a specific area, removing float will work fine
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.
I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.
Here is the page I'm talking about : link
If they are all the same size if works beautifully : link
Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)
Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS
Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.
I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.
Use display:inline-block
You may also find vertical-align: top or vertical-align:middle useful.
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
<p> </p>
You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.
This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.
By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.
So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).
If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.
Add to .icons div {width:160px; height:130px;} will work out very nicely
Hope it will help