Why aren't my floats working - html

I am trying to create a footer for a website and need there to be two sets of links on either side. I have it all in a div and the links for the left and right sides are in uls and their own divs that have ids.
This is my HTML:
<div class="bb">
<div class="fl">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</div>
<div class="fr">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</div>
</div>
And here is the CSS I have going along with it:
.bb {position: fixed;bottom: 0;list-style: none;margin: 0;padding: 0;text-align: right;}
.fl {display: inline-block;float: left;}
.fr {display: inline-block;float: right;}
.fl li {display: inline;}
.fr li {display: inline;}
Why is the footer for the right side not floating all the way to the right side of the page?
Thanks for any help

To my understanding, the problem is your whole footer bb does not have a width. Just adding width:100% to bb will solve this.
The fr actually floats, however, inside the footer bb.
I put a jsfiddle at https://jsfiddle.net/Lw93vtgr/ showing this.
Further, you may not want to assign float with inline-block, the result display would be block anyway.

So i think you forgot set the width of class .bb
In your code, <div class=".bb"> have a width equal to your content.
You can try to set .bb class with width 100% or equal to your page width

You must remove the position: fixed; from the bb class, or else specify the width of it.

Try adding width: 100% to the class .bb.

Related

Creating full-height vertical menu in CSS

How can I force my tabs to take all the remaining space in the vertical menu? so, adjust the spaces between the tabs according to the number of tabs.
<div id="menu">
<ul>
<li>
<a class="lien_menu"><br>Onglet0 loooooooog</a>
</li>
<li>
<a class="lien_menu"><br>Onglet1</a>
</li>
</ul>
Here is my current code : http://jsfiddle.net/96EGh/
Thanks in advance.
Do you mean the fill the width or the height?
If you mean the height (as it's a vertical menu). You need to give your container a height so that the UL will fill it, and allow the LI elements to fill the rest of the space.
I've made a fiddle using a fixed height and display: table; / display: table-cell; to achieve this at http://jsfiddle.net/96EGh/3/
You can add more LI elements and they will fill the space.
you can do by css
ul{display:table;}
ul li{display:table-cell;}
You can do percentages.
ul li {width:48%;margin-right:1%;}
ul{width:100%}
Use percentages in width and Ems in font.

making span and ul on the same line

I have the following fiddle, I wanted to make the span and the ul text to be vertically aligned. Right now the ul text seems to be a bit shifted up a bit, can't figure out why this is. Here's the respective html:
<div id="main">
<div class="row sort-container">
<span class="sort-by brandon-grotesque-regular">
Lihat berdasarkan:
</span>
<ul class="arvo-regular clearfix">
<li><a class="" href="?sort=popular">Barang Terpopuler</a></li>
<li><a class="" href="?sort=terbaru">Barang Terbaru</a></li>
</ul>
</div>
</div>
You can set vertical-align to middle on the ul element.
However, why do you need a layout so complex? It would be better if every element was inline, with no floated or inline-block box.
This is due to browser defaults, just like body element also has a padding...so we often use something like normalize to reset all of those in all browsers to 0.
ul{
margin:0;
padding:0;
}
And remove margin-left from #main .sort-container li {...
Thats it

CSS Floating / Centre combined responsive design issue

I have a footer that has 3 elements within it as follows:
<div class="footer">
<div class ="jumperMenu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class ="logo">
<img src="#"/>
</div>
<div class ="navJumpMenu">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
The footer div needs to have a max width of 1600px,i need the JumperMenu to stick to the left of the footer, logo to be in the centre and navJumpMenu to stick to the right, right and left elements need 10px padding..
All is fine with floats - The issue I have is that I need all the elements to also move within their positions on smaller screens - so say the screen was only 1200px i need the 3 elements to stick to their respective layout positions but adjust to fit within the screen size.
Does anyone have any idea at how to accomplish this with pure CSS - so I dont have to resort to a jquery positioning?
Cheers
http://jsfiddle.net/calder12/KjG8v/1/
.footer{max-width:1600px; margin:0 auto;text-align:center;}
.jumperMenu{float:left;}
.navJumpMenu{float:right;}
.logo{margin:0 auto;}​
You'd probably want to set a minimum width on the footer container too to make sure the 3 elements don't actually run over each other, but I think that's what you want isn't it?
Is this what you are looking for?
#footer {
display: inline-block;
max-width: 1600px;
min-width: <your min width>;
text-align: center;
}
#footer>* {display: inline-block;text-align: left;}
#footer #navJumpMenu{float:right;}
#footer #jumperMenu{float:left;}
Hope that helps.

How to align middle slash image with links?

I have this css code http://jsfiddle.net/989Pd/ where the slash images must be in the middle of text height. How can I do it?
<div class="menu">
<div class="pedio940">
<ul>
<li>Αρχική</li>
<li>Προσθήκη RSS</li>
<li>Επικοινωνία</li>
</ul>
</div>
</div>
Instead of creating the slash as a background image, create it as an inline element and use the CSS: vertical-align:middle.
.menu ul li:after {
content:url("http://i.imgur.com/uB4Gz.png");
display:inline;
vertical-align:middle
}
Demo: http://jsfiddle.net/989Pd/8/
Edit: Yours is on the left, mine is on the right. I've drawn red lines to show the difference. They are not the same.
You can just adjust the height of the li
http://jsfiddle.net/989Pd/3/
put in a top value for the background like this: http://jsfiddle.net/989Pd/9/

Split <li> into two column

<ul>
<li>
<div class="ext-left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div class="ext-right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
</li>
...
</ul>
I'd like to split the each list element into two part(in the same line), in the left is an image, in the right is a link and a text(they should be in two lines).
I tried to use float left on ext-left but it doen't work.
Play with jsfiddle: http://jsfiddle.net/UeThn/1/
This is the correct version: http://jsfiddle.net/UeThn/10/
Add this CSS:
.ext-left{
float:left;
}
li{
clear:both;
}
New fiddle here
Here is what you do
<ul>
<li style="width:150px">
<div style="width:100px;float:left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div style="width:50px;float:right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
<br clear="both"/>
</li>
The idea is as follows:
1. give the 'li' a width
2. give both div's a width
3. float left and right respectively
4. Add a beak with clear="both" at the end
How about this:
li > div{
display: inline-block;
}
[JSFiddle]
(But evil browsers won't support that, see info here)
Floating left seemd to work. Think you've done something wrong.
http://jsfiddle.net/UXnVJ/
You just need to give each div a set width - otherwise, they think they should be 100% wide, which doesn't allow the next to float next to it. See fiddle-fix here.
Try this:
li {
clear: left;
}
.ext-left {
float: left;
}
Float both divs to the left
.ext-left, .ext-right{
float: left;
}
li {
clear: both;
}