In this blog post of mine, I needed many two-column bits, and that resulted in many elements. That caused lots of unwanted vertical space between them. I googled, and found out how to position: relative; top: -<whatever number>px. Now all the vertical space has piled up at the end. My googling did not reveal any command for negative vertical space (think LaTeX \vspace with negative argument), though that's what I was googling for. Is there any way to remove that huge space at the end?
PS I'm a total noob when it comes to web page design: all I know is a little HTML which I figured out by looking at the HTML for my other blog posts or which I googled for, and that little bit of CSS for the padding of tables. I do not know if Blogger accepts anything but pure HTML+CSS.
Update
Problem solved with CBroe's comment. Blog post originally ended like this:
Relative positioning only moves an element in regard to its “default” position (that it would have in normal flow, if the element was not positioned at all), but preserves the original space required by the element.
If you want to “move” elements without that effect, you can use for example margin instead.
Related
This is my project: http://linguall.com/
We bought a template and edited it. I deleted some of the page that is not needed for us. However, as you scroll the bottom of the page you can spot the the huge blank space.
I could not found any reason for that.
You are using relative positioning on some of your elements. The problem with this is that the element still takes up space where it originally was and you will struggle to get rid of that.
I'd investigate replacing your usage of relative positioning for large blocks of content that you don't want to take up space on your page - try absolute positioning or using a grid layout.
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
I'm new to HTML and CSS and building my first site. I'm coming across this very strange alignment and positioning issue and has stumped me. I would appreciate anybody helping me understand what's going on.
I've loaded the html and css to codepen so you can view it: http://codepen.io/joe/pen/kJmeK
I also took a screenshot of the problem and uploaded it for your viewing:
What's happening is that as soon as I wrap the phone number and the address lines 1-3 in a p tag, they seem to get right-aligned and get stuck under the map. But as soon as I unwrap them they go back to their original location and behave normally.
However, loaded into codepen the p tags seem to be behaving as they should.
I've tried to address this by playing with negative margins and paddings in CSS for both the h2 tags and the p tags. But that creates the problem of not knowing where the <p>s are exactly located and aligning them with the contact_us form.
As you can see in my CSS, I have not played with the p tags anywhere else previously.
What am I missing here?
youre code is pretty messy from what i can tell. If youre gonna use tables, why bother with absolute positioning for this simple layout?
Most likely, maps, has float right, p, doesnt have any float property and is thus positioned behind the map, because a floated element is taken out of the normal flow of elements.
p {float:left;}
or
p {float:right;}
should do the trick, but still i would suggest reviewing youre whole code, and making either a table layout, or better yet a css layout not using any tables for layout.
Also note, a floated element should have a width propperty set as well, otherwise, it shrink wraps.
I built a quick jQuery image slider today, but there's one problem. The images, which are inside divs, have a gap between them, offsetting them.
I've isolated the problem here: http://jsfiddle.net/UgzsH/
float: left; gets rid of that gap, but apparently because of the elements they are in, they stack vertically.
Unfortunately from this computer I can only test in Firefox. Thanks for any help.
Test case uses http://placekitten.com/.
Floating is how you get rid of the gap, but the last floated element is dropping down because the container is too small. The reason you get the gap is because elements that are display: inline with each other preserve the whitespace you get from the markup itself - if you remove the whitespace (meaning line-breaks) you'll notice the gaps go away. This makes your markup uglier, or course, hence why you use float instead. Make your containing div wider and they'll fit.
It's because in your HTML you have spaces between the divs and such. Try putting all the images and divs in one line of your HTML without spaces between the tags. No spaces!
Hope this helps and good luck!
EDIT: Here's the updated code. It looks a bit messy, but there are no spaces any more!
I use overflow: hidden on my site to get control over ending floats.
Which up to now always have worked perfectly.
I know there are several different approaches of ending floats but the overflow trick normally works best.
However this time I cannot get it right.
If you look at the following page and try to adjust the volume you'll see that the volume control goes under my header.
http://pieterhordijk.com/sandbox/html5-audio-api/mp3-format
The problem is in the #content-container div
When I remove the overflow the volume control goes over my header (which is what I want).
But I can't just drop the overflow or I have to result to another solution to control the floats, which is not something I want to do unless REALLY necessary.
Anybody has a solution to this problem?
You've already selected an answer, but there are some issues that should be pointed out. First, clearing a <br> is not semantic, it adds extra code and can cause issues in some browsers.
Next, you should not use the overflow method of clearing floats now that CSS3 is becoming more prevalent. It causes issues with any new parameters that display effects outside the boundaries of the container. At a minimum both box and text shadows will be cut off if you are using the overflow method.
You really should use the clearfix method. It's simple to implement, does not require any additional mark up, and does not cause issues with any CSS3 properties.
Good reading -
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
You could give the snippets div clear:both. You have the element in there anyway, and I assume you wouldn't want it to wrap around the nav, so it's not just adding unsemantic elements/classes for the heck of it.