Floating two lists on top of each other? [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Have an image floated to the left and two unordered lists floated to the right. For some reason the lists float side by side and not on top of each other. I can't get list-2 to float underneath float 1.
Would anybody have any ideas?
<div class="container">
<img src="yogapic1.png"/>
<ul class="list-1">
<li>Home</li>
<li>Influences</li>
<li>About Me</li>
<li>Classes</li>
<li>Andrews Video Blog</li>
<li>Photography</li>
</ul>
<ul class-"list-2">
<li>Find Us</li>
<li>Contact</li>
<li>Facebook</li>
</ul>
</div><!--container-->
.container {
max-width: 1075px;
margin: auto;
}
.container img {
float: left;
}
.list-1 {
float: right;
}
.list-2 {
float: right;
}

Answer 1

.list-2 {
float: right;
clear: right;
}
float: right will, if there's enough room, put the element to the left of any other elements which have been floated to the right. To override that behaviour and guarantee that it will fall below the most recent float:right element you need to use clear:right.

Answer 2

You've got a typo on list 2 (- instead of =). If you also add clear:right; to the lists it should do what you want:
Example: http://jsfiddle.net/nkYun/

Answer 3

Wrap the two lists in a single div element and float that to the right instead.
By floating the two lists individually, you are taking them out of the normal flow of the document, so they no longer force elements to appear below them.

Answer 4

To float two lists on top of each other you simple need 3 steps:
The container should have position as relative position:relative
One of the 2 lists should be float for example to the right float:right
The second list should have position absolute position:absolute and the right of it is 0px so that it start from the right and be on the first list

Answer 5

Here is an alternative approach. Sometimes trying to figure out what should be floated left, or what should be floated right can be confusing in code. But if you have a general idea of what elements you want to be floated, (and perhaps later on you will decide to add more to that section), then contain the items within a parent container (in our case a div element with a css class called lists) and float the entire parent where you want to be. Here's an example...
The CSS:
.container {
max-width: 1075px;
margin: auto;
}
.container img {
float: left;
}
.lists {
float: right;
border:solid 1px pink;
}
The HTML:
<div class="container">
<img src="yogapic1.png"/>
<div class="lists">
<ul class="list-1">
<li>Home</li>
<li>Influences</li>
<li>About Me</li>
<li>Classes</li>
<li>Andrews Video Blog</li>
<li>Photography</li>
</ul>
<ul class-"list-2">
<li>Find Us</li>
<li>Contact</li>
<li>Facebook</li>
</ul>
</div>
</div><!--container-->
And my fiddle
Notice too with this approach, you are no longer leaving the headache of ordering your lists with floats, but now, within this parent container, you can simply go into your HTML code and sore the lists, in any order you want them to be.
Enjoy!

Answer 6

Try to assign width to your list:
.list-1 {
float: right;
width:100%;
}
.list-2 {
float: right;
width:100%;
}
Edit
If you are giving same CSS to both lists, try something like this
.container ul{
float:left;
width:100%;
}

Answer 7

If you float list-2 to the right and clear: right too that should work. Like:
list-2 {
float: right;
clear: right;
}