So the intent for this snippet is to allow the paragraph on left to display a right border spanning the height of the parent container, which it manages to do under display:table for both the container article and paragraph if said rules are set. The ul following it is meant to be placed right to it, that too is working. The list entities are preferably allowed to float such that more than one bullet can be on a single line.
Now, when float:left is added to the li tags... the para text goes from starting up top in its cell, to starting below the last line of bulleted entries.
I know float:left is the problem since removing it rectifies the issue, but it then makes the list 1 bullet/line... something I'd rather not do.
Why is the float for the li tag repositioning the text on an item it isn't written to affect? I tried inspecting elements and I don't see any text-alignment being calculated afaik.
The HTML:
<article class="foo" id="bar">
<p> List on right causes my text to move down?</p>
<ul>
<li>why</li>
<li>yes</li>
<li>we</li>
<li>do!</li>
<li>why</li>
<li>yes</li>
<li>we</li>
<li>do!</li>
</ul>
The CSS:
.foo {
display:table;
width: 20em;
}
.foo p {
text-align: right;
padding: 0 1em 0 0;
border-right: 1px solid #999;
display: table-cell;
width: 10em;
}
#bar ul
{
width: 10em;
}
#bar li {
float: left;
width:2em;
margin-right:3em;
}
The JSFiddle snippet can be seen here: http://jsfiddle.net/U39ab/1/
Change
float:left;
to
display:inline;
JSFiddle
Answer 2
Keep float:left; in #bar li
but .foo p should have
vertical-align:top;
in its properties.
Then you can change padding to: (optional)
padding: 20px 1em 0 0;
to align it with the rest.
JSFiddle 2
just add position:absolute in
#bar ul
{
width: 10em;
position:absolute
}
DEMO
OR BeatAlex's answer
check display:inline here CSS display: inline vs inline-block
Related
Let's keep this simple and short, I've made 2 dummy examples of my problem.
I have a container section which is 600px wide, this section will container list of products.
each product is a 100x100 block, and there is a margin of 62px between each product.
The ul is set on display: inline-block so it won't go one under each other.
Now in the following pen example: http://codepen.io/anon/pen/yujLf
You can see what I want to do, can you see how the first row of squares, touch the border of the container & then the next element goes under?
(source: gyazo.com)
You can see how it's perfectly aligned for the width, as there's a perfect equal margin between each element.
Now this solution is a problem, because now the second row will have extra margin on the left side:
(source: gyazo.com)
I do have a solution for that, simply by changing margin-left to margin-right and disable margin-right for ul li:last-child.
But if I do that, I will not be able to align the last element with the border, like I did with the first example, take a look: http://codepen.io/anon/pen/wdhrJ
As you see, I had to change the margin to 40px instead of 62px to make it 4 elements per row.
Is it possible to implement what I want with using ul?
If your container is fixed at 600px, then the following solution will work:
ul li {
width: 100px;
height: 100px;
background-color: red;
margin-right: 62px;
display: inline-block;
}
ul li:nth-child(4n+4) {
margin-right: 0;
}
What I've done is change margin-left to margin-right in both of the above selectors. I've also changed your second selector from first-child to nth-child, to select the 4th element and every 4th element after that.
CodePen Example
Have you tried this hack instead? http://codepen.io/anon/pen/IgKtD
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
text-align:justify;
vertical-align:top;
font-size:0.001px;
}
ul::after {
content:'';
display:inline-block;
width:100%;
height:3px;
background:blue;
}
ul li {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
box-shadow: inset 0 0 0 1px purple;
margin:0 20px;
}
ul li:nth-child(4n), ul li:last-child {
margin-right:0;
}
ul li:nth-child(4n-3) {
margin-left:0;
}
If you go to http://www.leapfm.com and scroll down to the footer you'll see that the links are on the right bottom hand side.
How can I put em' in the center?
Please use Firebug or inspect element for easy access to the code.
So I'll start top down from the div class="footer", you'll need to change or add these css properties:
.footer {
display: block;
text-align: center;
width: auto;
}
The li for the links inside footer:
.footer li {
display: inline-block;
}
Then the a tags inside the above li tags:
.footer li a {
display: inline-block;
float: none;
}
Enclose the li-elements properly in a ul, and set margin: 0 auto on it.
Instead of using li-elements as separators, you could use li + li:before { content: "|"; }
Remove the CSS float:right for the class declaration.
.footer a {
float: right; //Remove this
display: block;
margin-right: 5px;
color: black;
}
Try to enclose the <li> tag with <ul>
and after that add this css :
.footer {
display: block;
text-align: center;
}
.footer ul {
margin: 0 auto;
}
.footer li {
float: left;
display: inline-block;
}
Remove float:right; from .footer a and enclose you are li tags with ul
<div class="footer">
<ul>
<li>Submit |</li>
<li class="divider"></li>
<li>FAQ | </li>
<li class="divider"></li>
<li>Contact Us </li>
</ul>
</div>
First of all you should enclose each of these LI's in a UL or OL.
Contrary to what the others have pointed out, you dont need to give the UL/OL a margin of 0 auto because it will already take up the entire space it has. Or give a display:block to the footer and text align. So when you set a text-align:center to the li; they will magically go in the center of the element. No need to center the parent element(the ul).
Also, if you want to do things the right way, get rid of the br tag and use margin or padding to space your way around your layout.
So; all you need to add to your code is this:
ul{
text-align:center;
}
ul li{
display:inline-block;
}
Sorry to put this in an answer. I would have rather be a comment to the top answer. I dont have enough rep for that. Not glory hunting!
Hope this helps
I read the following code on w3schools and do not understand how the overflow property would impact whether text appears to the right of the ul or not.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
padding: 8px;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
I know that overflow:hidden is used to handle content that goes outside of the box but don't understand how it applies in this instance.
I try to end the confusion:
ul is a block-level element as is the p element (they stretch to 100% of the parent width). That is why per default the p will appear below the ul if no width or display is declared on those elements.
Now in your example the ul contains only floated elements. This makes it collapse to a height of 0px (It still has 100% width though as you can see in the example). The adjacent p will appear to the right of the floated lis because they are considered as normal floated elements.
Now declaring overflow (any value other than visible) establishes a new block formatting context, which makes the ul contains its children. Suddenly the ul "reappears", not having size 0px anymore. The p is getting pushed to the bottom. You could also declare position:absolute to achieve the same "clearing" effect (with the side effect that now the ul is taken out of the normal element flow - the ps will be overlapped by the ul.)
See the example fiddle
If you are into the technical stuff, compare the according paragraphs of the CSS spec:
§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
and
§10.6.7 'Auto' heights for block formatting context roots. (Thanks to BoltClock for digging out the links).
ul{
list-style-type:none;
margin:0; padding:0;
background-color:#dddddd;
border:2px solid red;
}
li{
float:left;
}
a{
display:block;
width:60px;
background-color:#555;
color:white;
}
p{
margin:0;
outline:2px dotted blue;
}
#two{
clear:both;
overflow:hidden;
}
No overflow:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p>
<br>
With overflow: hidden
<ul id="two">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>
Setting overflow: hidden on an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hidden applied are cleared.
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
To quote from HTML & CSS Is Hard
To summarize, when you have an extra unfloated HTML element at the
bottom of a container div, use the clear solution. Otherwise, add an
overflow: hidden declaration to the container element. The underlying
idea for both options is that you need a way to tell the browser to
incorporate floats into the height of their container element
Instead of the overflow:hidden; use clear:both; for the <p>. here it is in use http://jsfiddle.net/Mvv8w/. Basically overflow:hidden will clear anything that is aside it just as clear:both; does.
This is why w3schools is not a reliable source for web designer/developers. You are correct, it is a terrible example.
It doesn't because, in this example, the parent element does not have a fixed with. Furthermore, it's an un-ordered list tag, which is going to stretch to the size of it's children regardless.
http://jsfiddle.net/EhphH/
CSS
.parent {
width: 150px;
height: 100px;
padding: 10px;
background: yellow;
overflow: hidden;
}
.child {
float: left;
width: 75px;
height: 120px;
margin: 10px;
background: blue;
}
.baby {
width: 200px;
height: 25px;
background: green;
}
Markup
<div class="parent">
<div class="child">
<div class="baby">
</div>
</div>
<div class="child">
</div>
</div>
I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.
<ul>
<li>
<a href='#'>This should be centered.</a>
<li>
</ul>
So as you can see from my image, the "work" link should be centered vertically. I have the width and height set with vertical-align: middle;. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.
Is there a way of aligning multiple lines of text to the middle without using line-height?
Use display:table-cell; in your li element.
li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
This will give you this effect:
write like this
a{
display:inline-block;
vertical-align:middle;
}
& you can give display:table-cell; to it like this
li {
vertical-align:middle;
display:table-cell;
}
but it's not work in IE7 & below
I came up with this to handle vertically-aligned 100% height/width anchors inside containers:
http://jsfiddle.net/khaustic/KDfN6/
markup:
<div class="links one">
One
</div>
<div class="links two">
Two Two
</div>
css:
* {
/*ie box model forever!*/
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.links {
height: 5.0em;
text-align:center;
outline: 1px solid #333;
float:left;
margin: 0 1.0em;
overflow:hidden;
}
.links.one { width: 8em; }
.links.two { width: 4em; }
.links a {
width:10em;
text-align: center;
display: table-cell;
vertical-align:middle;
height: inherit;
}
You can try to change display to block for hyperlink and use paddings:
li a {display: block; padding: 30px 10px 30px 10px}
I am struggling to make a list always display elements on 1 line only.
To understand this better let me first show some code:
html structure is this:
<div id="tab-content">
<div id="part-list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS style is this:
#tab-content{
overflow: auto;
height: 100%;
position:relative;
background-color: #373837;
color: white;
padding-left:20px;
padding-right:20px;
}
#tab-content ul{
display: block;
list-style: none outside none;
overflow: auto;
white-space: nowrap;
}
#tab-content ul li{
display: block;
float: left;
padding: 7px;
margin-right: 4px;
font-style: italic;
color: #cccccc;
}
I need the ul to have its items on 1 line no matter if it gets bigger than the containing div. If it does get bigger than the scrolling bar should appear. Right now it just gets wrapped..
I am using jscrollPane on #part-list because i have a custom scrollbar there.
PS: specifying a bigger width than the containing div, say 150%, is not a solution as the list has its content pulled out from a db and its length is dynamic.
Change float:left to display:inline. Live Example: http://jsfiddle.net/LgKsY/
#tab-content ul li{
display: inline;
padding: 7px;
margin-right: 4px;
font-style: italic;
color: #cccccc;
}
However in changing it from block to inline your padding/height will seem different. They key here is set a height on the ul of say 30px and then a line-height of the same value i.e. 30px on the li. I have also removed overflow:auto from the ul in this version as it is redundant because the div already does that job. 2nd example: http://jsfiddle.net/LgKsY/1/
Use css display:inline-block; instead of display:block and with display:inline-block use *float:left !important; /* For IE 7*/ and _float:left !important; /* For IE 6*/. Because disaply:inline-block; doesn't support IE 6 & 7.
Another solution, you can use float:left for all browsers instead off using display:inline-block