I used the following solution to create 3 divs next to each other:
Fluid width with equally spaced DIVs
However, when I wrap each box inside an <a> tag with display:block the entire layout gets funky.
Is there a way around this? The fluidity (is that even a word?) is not really necessary, but preferable. The reason I used it this solution is because it keeps boxes neatly next to each other even in IE6/7 and for the sake of simplicity too.
Thanks in advance!
You cannot wrap a div with a - and if I am understanding you correctly this is where your problems start.
If you want to make your entire div clickable, place a link inside your div around some text/a title/whatever and use jQuery to action this link if you click ANYWHERE inside the div
$(".divClass").click(function () {
window.location = $(this).find("a").attr("href");
});
Related
I'm trying to do a mobile first responsive layout. So on my HTML I have
First - Middle Content
Then - Left Content
Then - Right Content
and below all the content, I have a separate section of information that goes full width from left to right.
I'm using position:absolute for Middle,Left and Right divs to position them. My problem is, because the main 3 divs are absolutely positioned, the separate section goes below the main content and overlaps. How can I fix this?
I have a working fiddle here.
Basic floats example: http://jsfiddle.net/UKKcq/11
Basic display: inline-block example: http://jsfiddle.net/UKKcq/19/
There's a fair few things to consider here:
First, you'll notice in the second example, the text from the main section starts below all 3 divs. This is because they are still part of the flow of the document whereas when using floats they are not so the text wraps around them.
Also, with the second example, I had to delete all spacing/line breaks between the divs to stop a space appearing in-between them. This happens all the time with inline-blocks and I use the following jQuery function to fix it to avoid ruining the neatness of my markup:
jQuery.fn.cleanWhitespace = function() {
textNodes = this.contents().filter(
function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
.remove();
return this;
}
})();
$('INSERTPARENTDIVHERE').cleanWhitespace();
Furthermore, I had to use vertical-align:top as by default the shortest div (in this case the center), was aligning with the bottom of the other two divs.
One final consideration is that inline-block layouts such as this have a tendency to break when the user zooms using their browser or if the width, padding, border or margin were to change for any reason. You have relative control over the latter factors but to ensure things aren't dropping to the next line (which can look really bad) when the user zooms I recommend applying white-space: nowrap; to the parent div to try and prevent this.
I have two questions:
1) I have a div with an image that I use for my footer, but I when I resize the page the footer text gets all "mushed" together. Is there any way I can get the text to stay in a certain position and resize with the page?
2) I use a div for the body of the page, but when I try to add text and align it in position it moves the entire div. How can I get the div (which is just background color) to stay in place while I move the text around?
Here is the site and code on jsfiddle: http://jsfiddle.net/HzwV9/embedded/result/
Thanks.
Had a fiddle with your fiddle, here's a result that may help you: http://jsfiddle.net/HzwV9/4/
Some things I noticed:
A few of your HTML tags aren't closed (that's asking for trouble).
No need to use <h1> for your lower links; it's a block element, not an inline element, and also you'll need <a> to make a link later anyway
You can simplify the big list of tags at the beginning by just using * - all!
Hope this helps. Also, footers are notoriously difficult, since CSS doesn't do vertical sizing very well...there's a few solutions out there but they all have something wrong, up to you what you want to be wrong :)
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)
I have this code: http://jsfiddle.net/5RbrL/
As you can see, the text doesn't go over the .box div. I would like to achieve the same, but the .box div should be attached to the bottom of the container.
First thing I tried was setting the container's positioning context to relative and making .box absolute, but this takes it out of the document's flow and text is placed underneath .box, which is exactly what I don't want to happen.
I do not know the height of the container, as it will depend on the amount of text inside it.
Is there any way to make the text fill the entire container, but leave the bottom right square empty (for a background graphic)?
[EDIT]
I apologise for not phrasing my question clearly: I would like the text to wrap around the .box.
Unfortunately what you ask can't be done with pure CSS.
You need a specific height to be able to float/position elements in this manner.
You could get around it be adding more elements, but this isn't preferable as then you'd have to invent some way to spread the last parts of text over to the empty element.
Well you could fake it by adding another element and somehow injecting the last lines of text into it.
Other than that, without a specific height I am not sure there is a real way to do it. HTML should come up with some kind of pathing system :D
__
After some thinking and experimentation I have an easier solution, just include the element within the text (inside the <p>.)
Have you tried moving the image div to the bottom of the container (underneath your text) and then clearing the container with either a clear div or overflow:hidden? http://jsfiddle.net/5RbrL/14/
What exactly do you want to do?
if do you want the box in the bottom, you can put an overflow hidden in the container, and then move the .box to the bottom > something like this >
http://jsfiddle.net/3v2mr/
or the structure can't changes?
removed
So if you look at the tabs and look at hw2, you'll notice it has a little extra spacing that overlaps the spacing on the right. That's because wrapped the div in the <li>. You will notice the others not having it. I don't understand why is it making that extra little spacing after I wrap it.
Just for the record, this is for CSS spacing which has nothing to do with the JS.
Update: I found a ghetto work around!
Is it a space (or the absence of one)?
display: inline will respect whitespace.
You are putting a block level element (div) inside an inline element (li), which is invalid. Most browsers do a reasonable job of rendering this sort of thing, but the results are unpredictable.
I would suggest using divs for the higher level menu. You could use a container div for the menu and float divs within that for the individual tabs.
I ended up just changing the css for that page.