I have a bunch of anchor tags containing images and a h1 header. I have apllied the float element to allow them to layout in rows of 2. For some strange reason though, the milky way link is causing the next anchor to float right. If you swap the milky way with saturn, it works fine. I can't for the life of me figure out why. Can anyone explain this strange phenomenon to me?
Here's the jsfiddle for my page: http://jsfiddle.net/SVuQQ/
If you add clear:both to the Andromeda anchor it will fix the float issue. I set it up so you can just add the .clear class to any other anchors that might need it if you add more.
Explanation: An element with clear:both prevents elements to the left and right with floats from having an effect on the flow of the page layout. In this case, the milky way anchor float was having an adverse effect on the elements below. By adding clear:both to the Andromeda anchor, the Milky Way's float is no longer pushing down the rest of the elements.
Alternative Solution: The float issue is happening because you have anchor tags with different heights. They can't stack properly because one float is pushing down farther than the other. If you set the same height for all of them it would fix the issue without clear:both. jsfiddle.net/SVuQQ/7
I suggest try to set your #subject-content a-menu {height: auto}
and remove float:left at the same line (e.g #subject-content a-menu)
Related
CSS is still fairly new to me. I have a div element and want to define a button element that would be placed right of the div element. However, I want to do this without modifying any of the styling of the div element. Is this possible? Edit: If yes, please show me an example :)
You can use position:absolute for that element and align it using right/left and top/bottom css rules, this will align the element relative to the entire webpage (or nearest position:relative parent), but what you're looking for is usually done by making both elements float:right/left or display:inline-block. Note that the '/' in my answer indicate your choices, not actual css directives.
Simple add the
float:left
or
float:right
to style it will work fine and display after one and other.
I think I need some more assistance with the concept of floating. This time my question revolves around floating two or more elements to the left. How does this work exactly? I know that a float lifts the children of the element off the page and moves them all the way to the left. All other elements respond by wrapping around... but how does the concept of floating two elements apply to this?
Here is what I understand: Say I have two DIVs, a and b. Float a to left, b's content will wrap around it... but if I float b to the left... How does the content respond to a?
EDIT: Here is something I was messing around with to see if I could understand this concept.
The first DIV has an inline style that floats it to the left... But see how the second DIV with no inline style margin is all wacky?... It doesn't show this wacky margin when the DIV is floated to the left also.
Edit: I know inline styles are bad... I was just using them to showcase an example here.
Here's a series of very comprehensive tutorials: Floatutorial. By following the tutorials it becomes very clear how floating works.
To answer your specific question: When you have two elements with float:left, then the surrounding content will wrap the second element, then the first if there's room left.
Example: http://jsfiddle.net/ak736
The background color of <ol> list is not displayed properly. This problem started after I floated label left and input right. How to fix this. The expected result is:
Here is my result: http://fiddle.jshell.net/WZ3nM/1/
Similarly I've problem with the div .wrapper. The shadow should be way below the content and there should be a white color background beneath <div class=.col-2>.
You need to clear the float, before you close your <ol>
Check it out here.
http://fiddle.jshell.net/WZ3nM/5/
Whenever you float things you must clear them at the end so that it can calculate the height properly
I modified your code and added a third <li> with the following style:
clear:both;
Your float was taking elements out of the document flow and this the background color didn't know where to end.
Hope that helps.
As others have suggested you can clear the floated content - although this will add another element. You can also add
li{overflow:auto;}
which will prevent the list from collapsing. In IE6 you will also need the rule
li{height:1px;}
http://fiddle.jshell.net/WZ3nM/9/. This method does not require a clearing element.
I am making a Web page with a slideshow, using the same technique used on http://zine.pocoo.org/. The person I'm making the site for wants the slideshow to be centered. However, some of the photos are portrait layout and some are landscape. (This was not my choice.) I need a position: absolute to get the li's containing the items in the right place, so centering them does not work. (At least, not by normal methods.)
So, I thought that it might work to insert a 124-pixel "spacer" before the image on the portrait pictures. I tried it with a <span style="width: 124px;"> </span>, but it only inserts a single space, not the full 124 pixels. The slideshow fades in and out OK, though, so I think that it would work if I could get the proper spacing.
My question is this: does anyone know a way to have 124px of space inline in HTML (preferably without using images), or another way to center the pictures in the li items?
This is way old, but I guess it's still worth answering. The reason your span isn't expanding is because it's still an inline element. set display:inline-block to get it to behave more like a block element
I think you need to add margin-left instead of padding-left, because the margin is outside an element, and the padding is inside.
Try to avoid putting large spacers on elements and especially on multiple elements. The only way to add a spacer on your element would be relative positioning or an inline-block element (use carefully.)
Your best bet for the slideshow is to have a relative positioned <ul>. Since the <ul> is relative positioned you can set the <li>s to be position:absolute; within the <ul>. At this point you can set the <li>s to width:100%; and text-align:center; so that anything inside is positioned in the horizontal center (vertical centering in CSS2 is tricky.) Check out http://jquery.malsup.com/cycle/ which outputs inline styling by default but is still really nice.
http://www.wilwaldon.com/crossing/page3.html
If you look at the page in IE7 there is an ungodly amount of space between the top paragraph and the bottom spotlight area. It works fine in all other browsers.
If you know of any tricks or hacks to prevent this I'd greatly appreciate this :)
Thank you!
The reason you're getting all that space is because of all the top padding and margin you put on the #spotlight yourself. You seem to be adding all that space as a way of making enough room for the floats inside it. Don't do that. Make the div contain its floats by adding overflow: hidden to it. If that has unwanted side-effects, add the clearfix class to it, which is already in your CSS.
The reason you're seeing all that space in IE7 is because the #spotlight has a width, which is triggering layout. That causes it to contain its floats already, pushing all that top margin and padding up above it.
Oh, and don't use multiple id="spotlightbox". That's what classes are for. IDs must be unique. Use class="spotlightbox" instead.
if you set display:inline on your spotlight div it should render better in IE7...but that will break other browsers - so use the conditional css - or rewrite your style to be more compliant