How to prevent from text to extend the container height?
My code - Plunker
I try to create a fluid layout, my sidebar is made of a list of links. I
want each <li> element to be a perfect square, the problem starts when I
add the text inside. It seems to be adding height to my square and what I
get is a rectangle. If you examine my code the dimensions of my list
objects are 32px X 43px. How can I prevent from an inside text to extend
the <li> elements? And how can I make the text appear on the bottom left
side of the <li> element?
My CSS:
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
}
.sidebar{
width: 5%;
display: inline;
float: left;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
background-color: oldlace;
}
.sidebar a{
display: block;
font-size: 0.5em;
}
My HTML:
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li><a href="#">ANALYTICS</a></li>
<li><a href="#">STYLES</a></li>
<li><a href="#">VOTERS</a></li>
<li><a href="#">GET STARTED</a></li>
<li><a href="#">UPDATE</a></li>
</ul>
</div>
<div class="content">
<p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
</div>
No comments:
Post a Comment