I have a div and a ul that I'm trying to float to create two columns. The items within the ul are also floated so they will expand horizontally before wrapping vertically:
http://jsfiddle.net/3dhHe/7/
<style type="text/css">
ul {list-style-type: none;}
li {float:left; width:275px; min-height: 50px; padding: 12px; border-radius: 4px; border: 2px outset #eee;}
.float-right {width: 300px; float: right; margin-left: 25px;}
.float-left {float: left;}
</style>
<div class="float-right">
This content should float to the right
</div>
<ul class="float-left">
<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
<li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li>
</ul>
If I remove the float from the list items, then everything works as expected, however, when the li elements have a float applied, the ul element seems to 'lose' it's float.
Is there a way to force the ul to float to the left of the div, while allowing the contents of the ul to float?
Note: I need the width of the ul to be dynamic, so I can't set an explicit width to it.
Thanks!!!
Update
I'm trying to achieve something like this:
The text on the right can have a static width, but the ul containing the boxes should not have an explicit width (so that if the width of the browser is increased, then the "Test 3" box will move to the first row).
The problem I'm having is that if I don't set a width on the ul, then the text content is moved above the ul:
Is there a way to position the div first, then restrict the ul to only use the remaining space?
To Achieve your goal:
1. All li inside the ul must be floated horizontally on 1 line.
When this is achieved:
2. The ul must find enough space beside the div to float beside it.
You must give the ul a max-width, to force it not to expand and take space as much as it wants, make sure its enough so that all of its children li are floated beside one another.
If the max-width isn't enough, then the li will have no strength to say NO!, and they will simply take new lines below each other.
Check it out : http://jsfiddle.net/AliBassam/3EmdM/
Why is this happening?
When you are telling the li to float:left; it is as if you're telling them : Try your best to float left, take every space you can so you can float left, cry and complain to your Mum (ul) and tell her that you MUST float left! All of us on the same line!.
When the ul noticed that not all its children li have floated on the same line, it takes a new line below the div so it can achieve that.
Here's another example, notice that when the 2 li have floated beside each other (1), and when there's enough space for the whole ul to be beside the div(2), it will float beside it.
Here's another example with 2 divs, same result, the second div will not float until all its children div have floated inside of it (1), and enough space have been found beside the other div(2).
UPDATE
What you need is to have both the div and the ul inside a Parent Div, this div will have a position:relatve; and min-width, giving it a minimum width will allow it to expand when you maximize the browser, and it will allow it to become smaller but only to a limit.
Then give the child div the static width, let's say, 250px, and give the ul a position:absolute; with right:250px or a little bit more (consider it as a margin-right).
<div style="position:relative; min-width:600px;">
<ul style="position:absolute; right:250px; left:0px; ">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul>
<div style="float:right; width:250px;">
This content should float to the right
<br />
This content should float to the right
<br />
This content should float to the right
<br />
This content should float to the right
</div>
</div>
Check it out : http://jsfiddle.net/AliBassam/FFrev/
Related
Why does the div to the right float higher than the two divs to the left? How can i get them all aligned to the top?
HTML
<header>
<div class="nav" style="width:100%;border:#900 thin solid;">
<ul id='nav-left' style="list-style-type:none;float:left;width:30%;">
<li class='nav-link'>Bookstore</li>
<li class='nav-link'>Authors</li>
</ul>
<h1 class='nav-logo' style="width:30%;float:left;background-image:url();">
Logo
</h1>
<div class='nav-right' style="width:30%;float:right;">
<li class='nav-link'>Sign in</li>
<li class='nav-link'>Sign up</li>
</div>
<div style="clear:both;">
See fiddle http://jsfiddle.net/e6h3jyb4/
You have li elements that aren't contained within a ul element. If you wrap those li elements in a ul, then that should fix your alignment issues. In addition, I would suggest that you make all of your columns float: left. Your last column is float: right, and since each has a width of 30%, you will have a large margin between the last two columns. You could also fix that by making your widths 33.33% so it is closer to 1/3 without any leftover margin.
When you add the <ul> to the list elements it adds a margin. Add the <ul> tag to the right-hand list and it will fix it.
HTML
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
width: 20%;
}
My Problem
When I use display: inline-block; my <li> elements are acting as if they were wider than if I use float: left;. I have their width set to 20% (100% / 5) but the last <li> is forced to the next line as if the are too wide... When I use float: left; instead of display: inline-block;, the five <li> elements fit as expected (with the same width)...
jsFiddle: Inline-Block vs. Float
I want to use inline-block due to the fact I don't need to use a clearfix to make the parent <ul> expand to the height of the <li> elements... I may decide to use float if I could find the proper way to use a clearfix in this circumstance... Regardless, I would still like to know why inline-block widths are too wide... These <li> elements should fit five-wide on one line as long as the width is 20% and the content inside is not too wide...
The only question I could find that is similar to mine is this one (which didn't help me): css inline-block vs float
It's simple. If you add a background: red to your li rules you will see that there is a small gap between each li. The gap is not a margin or padding but a whitespace character (a space) which is created when the browser 'collapses' your newlines and tabs. The issue here is your inline elements respect whitespace but floated elements do not.
There are several solutions based on your requirements and how 'hacky' you want to get. You can see them here: Ignore whitespace in HTML
Personally I'd use display:table-cell for my li as it enjoys the best browser support and is the least hacky approach
ul.table {display:table; width:100%}
ul.table > li {display: table-cell; padding: 0; margin:0;}
An equally valid (but less readable) solution would be the remove the whitespace from the source like so:
<ul><li>Item #1</li><li>Item #2</li></ul>
This will work in any browser, even IE4. Some people do this with comments to hide the whitespace but I think that's an abuse of comment semantics and still looks ugly in the source anyway.
basically i have a ul list
<ul>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
</ul>
now the styles for the list is:
li {
display:inline-block;
margin:5px 0 0 8px;
width:73px;
overflow:hidden;
}
li a {
display:block;
background:url(../images/gtborder.png);
width:73px;
height:55px;
}
li:hover {
background-position:0px -55px;
}
Ok now, the gap between each list should be exactly 8px but when i view it in a browser... its mroe then 8px. Its because of the newline.
If i had all the li tags on one line, it would be fine but i dont really want to do that.
Is there a way i can keep my html as it is and just edit the css so this space isnt there anymore?
Well, since you set the list items to be inline-block the whitespace between these items in your markup (i.e. the indentation) is what is causing trouble here. Two list items are therefore seperated by a whitespace and the margin on the left of each list item.
Solution: Try to float the list items or get rid of the whitespace in between the list tags.
Good luck.
Got it
There is a space between each li tag - I removed it:
http://jsfiddle.net/j5yDd/1/
original answer::
You also have a top margin of 5px so the space will be 13, you need to remove the 5px top margin.
er. are you sure this is the exact css - as written you have a top margin of 5px and a left margin of 8. I don't see any bottom margin at all.
http://jsfiddle.net/j5yDd/
I've used list item background images for customized bullets hundreds of times in the past, and somehow never came across this issue.
Essentially, I have an IMG floated left of the Unordered List. The bullet background images are set to top-left of each LI. However, the floated image is covering the bullets, as the browser is treating the list as if it's still full width (as if the floated image almost isn't there).
It's a bit hard to explain. So here is a screenshot with notes.
http://img695.imageshack.us/img695/1328/cssquestion.jpg
Here are some code snippets (sorry, can't upload to a server at the moment):
<h2>About Us</h2>
<img src="image.jpg" class="img-left" />
<h3>Heading</h3>
<p>Text</p>
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
</ul>
ul {
padding: 0;
margin: 0;
}
ul li {
background: url(../images/bg-main-bullet.gif) top left no-repeat;
list-style: none;
padding: 0;
margin: 0;
}
.img-left {float: left; margin: 0 19px 0 0;}
Does anyone have any ideas how to achieve my desired result?
Any tips or input is greatly appreciated!
Thanks
The default style position for lists is "outside" meaning that they appear outside of the related padding or margin. Presumably you have some margin or padding on the list or list items, pushing them past the right side of that graphic.
The fix is to set your list style position to "inside". Try adding this to your stylesheet (customize the specificity of ul to fit your needs):
ul{ list-style-position: inside; }
You need to also float the unordered list itself or set it's padding to accommodate the floated image.
So if you're floated image is 300px wide then you will want to do:
ul { float: left; }
or...
ul { padding-left: 300px; }
What currently happens is your li's bounding box begins behind the floated element. So we need to have it's parent element contain these bounding boxes. Floating the list will do this but setting the padding will do this as well.
Caveats of floating the list are obvious. Caveats of setting the padding is that if you wanted the list to flow beneath the image they will not. They will always be indented. However, for a bulleted list I would think it's best that the bullet points always be left aligned. So the padding solution is the one I would recommend!
I have organized a menu. Its HTML is as follows:
<ul class="topmenu">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<ul>
This is a horizontal menu, so I have floated the list items to left to appear them in a horizontal line. I could have used display:inline to appear them in a single line, but since IE does not support it and I don't know any other way to do so, I used float:left;.
It's css is:
.topmenu {
list-style:none;
margin:0;
padding:0;
}
.topmenu li {
float:left;
}
This brings the menu in a perfect horizontal line, but the entire list is floated to the left. I want to bring the .topmenu to appear in the center of the document and keep the listitem inside it floated towards the left.
I found that this is achievable by defining width property of the .topmenu, but I dont want to fix its width as the list-items are dynamically generated and thus could increase and decrease.
Any one know of any solution?
Here is the solution without using width:)
display: inline is supported fine by all versions of IE. It's inline-block that isn't supported completely in IE 6 and 7 (source).
This should be solvable by simply switching to display: inline.