I am trying to create a list, two items wide and however many down. Inside on div is an image, this image seems to overflow the div even when I tell it not to. An example can be found here.
Can someone help me format this the way I would like it?
Setting the overflow property to hidden will prevent div contents from spilling over:
.catalogentry {
overflow: hidden;
}
http://jsfiddle.net/6XXrp/
As per your comment:
What you'll need to do then is wrap each img in a div, say of class contain, and specify the following in CSS:
.contain {
height: /* max height you want */
width: /* max width you want */
overflow: hidden;
}
try resizing your img instead of cutting it of with overflow:hidden;
something like this:
.catalogentry .itemImage img {
max-width: auto;
max-height: 80px;
}
note that resizing pictures is better handled server side, to improve loading times, but that is a different story...
Related
I have tried all the solutions I can find to this problem, but the damn thing keeps overflowing. To be specific, when I add anything more than an extra word to the "Watch the space" text to the right here http://robinlovelace.net/ , it disappears from where it should be an moves to the bottom of the page, below the 'comments' link.
I've tried adding overflow: auto; and word-wrap: break-word; in the CSS #home_right area, (as recommended here) but this fails also. It's such a simple problem I think I must be missing something that may be of use to others.
You need to set a width on it.. try the following:
#home_right {
width: 220px;
}
This is what it currently is:
#home_right {
overflow: auto width: 10 em; /* Syntax is incorrect, you forgot the ; */
}
In this case, there is actually no need for overflow.. all you needed was a width!
This is because the div is floated and when you add content to it the width is extended by the text and becomes larger than the available area and so it floats to the nearest available space. To prevent the text from widening the div, you need to set a width on the sidebar. Using firebug I figured out that in your case you need to add this in your CSS for #home_right:
width: 224px;
What you have:
overflow: auto width: 10 em;
What you should have:
overflow: auto;
width: 10em;
Spaces and semi-colons, be careful!
I've noticed that if I view the page at wider resolution, the content of a section gets aligned to the right, instead of centered.
I use
margin: 0 auto;
width: 998px;
overflow: hidden;
It seems to have this bug, at least in Safari, Firefox and Chrome. I tried disabling overflow: hidden and it gets rid of the bug, but messes up my floats inside the content.
You can see an example at the page live here:
http://autouncle.dk/da/brugte-biler/Kia or http://autouncle.dk/da/brugte-biler/Ford (you have to view it at at least 1500px widescreen to see the bug).
Any ideas on what can cause this bug and what are possible solutions?
About the reason of the problem: this is due to the page-title element of your header:
#header-outer element contains some floated elements but you forgot a clearing, so the offset left of the main section of your site starts where the page-title ends. (you can verify this by hiding page-title element — when you set display: none the page is correctly centered)
So adding
body#basic_page #header-outer {
overflow: hidden;
}
you solve the problem
As a sidenote strongly avoid to put empty div only for clearing purposes: there're cleaner methods that don't require extra markup, like easyclearing
Your solution is removing overflow: hidden
To fix the float bug on the second example you gave try to use 100% of the width:
body#basic_page.brands_controller #content .text_info {
overflow: hidden;
font-size: 12px;
width: 100%; /* new rule */
}
Remove the
overflow:hidden
from div#content and put its contents in an extra <div> in it which has
width:100%;
overflow:hidden;
This resolves the problem for me.
I have to use a float div (the main window of my application), and I'd like to center that floated DIV based on the client's screen width. How can I accomplish that?
Right now I'm using a left:20% but that's not always centered depending on the user's screen resolution
Do you want the div to grow relative to the browser window, or to fit the content inside of it?
If the former, you can just use a percentage based width rather than pixel, and it should still center.
If the latter, don't use a float...start by setting width:auto; (I think that should make it auto-expand to fit content). Then you will need some javascript to measure the width of the DIV, set the width: css property in pixels, then measure the browser window, and center the container based on these measurements.
Sorry, I was wrong about width:auto;. I guess just float it, and then use javascript like I described above to manually set the margin-right and margin-left.
Sorry, thought up a better solution.
#float {
float:left;
margin-left:50%;
position:relative;
}
And then, using jquery,
$(document).ready(function() {
var float_width = $('#float').width();
var left_spacing = float_width / 2;
$('#float').css('left', '-' + left_spacing);
});
Forgive me if my javascript is off or doesn't quite work...I didn't test it and I'm a JS noob :)
You can try to use
.mainWindow {
margin: 0 auto;
}
then make sure the parent element is text-align: center;
I usually use an auto centered container div and then put any other containers (like your floated div) inside that container. Is there any particular reason you can't do that?
Example CSS:
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
My solution is easy with css
.div{
position: absolute;
top: calc(50vw);
left: calc(50vw);
}
is code clean
What's the simplest correct way of aligning images without gaps horizontally within a div?
If possible I would not like to wrap every image in a div and I would not like to use a list. I'm rather looking for the proper CSS to achieve this with minimal markup.
The biggest problem are the gaps between the images which I can remove by setting the font-size to 0 wich is ugly and works only for Firefox.
<div class="images"><img1><img2><img3></div>
.images {
display: inline;
...???
}
A good way to do it would be to float the images.
However, be sure to add an overflow attirbute to their parent container to ensure it goes all the way around them,
Adding a margin would also neaten them up.
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
I'm a css noob, and though I want this DIV to resize when the window is resized, I don't want inner content to change the size of it.
Use the overflow statement. e.g.
overflow: hidden; /* all content hidden as it spills over */
overflow: auto; /* Scroll bars appear on div when required to allow moving around */
overflow: scroll; /* Scroll bars will be present at all times */
Try using:
div {
overflow: hidden;
}
Read more here.
set overflow: hidden on the containing div
Have you looked into CSS and the overflow directive? You can use this to tell the div to scroll or truncate/hide its content when the content is too large.