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.
Related
I am using twitter bootstrap 2.3, I need the menu to be aligned to the right and also need the anchor to have a diferent widt, depending on the size of the world inside the anchor.
With next code, it's working, I leave empty columns with offset class, but not sure it there is a better to achieve the same result with another technique.
What I don't know how to do it is get the same "empty space separation" between each li, each li having a different width.
<div class="row_fluid">
<ul class="menu_logged span7 offset5">
<li class="span1 offset6"><a>Test</a></li>
<li class="span1"><a>Medium phrase</a></li>
<li class="span1">123</li>
<li class="span1">Hello World</li>
<li class="span2">Back</li>
</ul>
</div>
Any help?
Thank you
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/
I have
<footer class="meta">
<ul>
<li>3 notes</li>
<li>10 comments</li>
<li>3rd Feb 2011</li>
<li class="tags">
<ul>
<li>Tag name</li>
<li>Tag name</li>
</ul>
</li>
</ul>
</footer>
I am wondering why my last tag item goes to the next line
http://jiewmeng.kodingen.com/demos/folio-wip/index.html
You could try to enforce a one-line display, by adding:
li.tags,
li.tags > ul {
white-space: nowrap;
}
As others have pointed out, however, it drops to the next line due to width of the content being greater than the width of the parent element.
Having played around with this, it turns out that, for white-space: no-wrap; to work, you'd also need to use display: inline; (or display: inline-block;) on the li elements.
JS Fiddle demo.
The second tag name doesn't have space to float so it drops to the next line.
If you give the parent li more width it will stay on the same line
It's just overflowing since there's too much content to fit in the parent box. You can very easily check these things if you install firebug in your Firefox browser.
I'd like to center the navigation bar but I'm not sure which part of the code is problematic.
<div align="center"><ul id="nav" class="dropdown dropdown-horizontal"><li class="hover">HOME</li>
<li><a name="blank">PORTFOLIOS</a>
<ul>
first of all, your html is missing end div tag
more importantly, instead of , assign an id selector to your div tag and apply CSS to get the centering
for instance
<div id="wrapper"><ul id="nav">...</ul></div>
and css
body {width:100%;}
#wrapper {width:700px;margin:0 auto;}
I have a div which contains an unordered list... After some user actions i load the div with a longer list i.e. containing more list items than the previous one. I use jquery's higher level ajax functions to do this.
The problem is when i load it through ajax the list elements overflow the div's bottom portion and some of them get's displayed out of the div.
I haven't set any heights for the containing div assuming that it will expand to accomodate any future longer lists.
I'll post the code below and will be extremely grateful if someone figures this out....
#sidebar1 {
float: left;
width: 15%; /* since this element is floated, a width must be given */
background: #FFE8BF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
text-align:center;
}
<div id="sidebar1">
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>
<a href="#" id="loadHotel" >
HOTEL
</a>
</li>
<li>
<a href="#" id="loadCountry">
COUNTRY
</a>
</li>
<li>
<a href="#" id="loadCity">
CITY
</a>
</li>
</ul>
</div>
</div> <!-- end #sidebar1 -->
I load the list elements into the <ul id = "sidebarmenu1">
Hope i'm clear...
Thanks a lot in advance....
have you tried:
$('ul#sidebarmenu1').removeClass('class here').AddClass('class here');
that should work
Figured out a workaround for the curvy corner problem...!!!
after i load the menu items with ajax, i use jquery to increase the height of the div and then call curvy corners to round the edges...!
Voila..!!!!