I'm currently building a website and I'm not too experieced. So I have those boxes with different content (text, table and list). Every box has a padding of 40px and automatic height. On the text one and the table one it's working perfectly. Only the list has problems:
http://abload.de/img/status64u3x.jpg
What am I doing wrong? I also want the bottom edge of the information box to be in the same vertical position as the edge of the edge of the features box. Since this website will have a lot of different content with different heights but the same layout a kind of responsible solution ould be awesome. Is therea CSS way for it?
This is how I want it to be:
http://abload.de/img/howiwantithpuz9.jpg
Also here is the code:
<div id="mainContainer">
<div class="boxSeperator text">
<p>
<span class="gross"> BLENDER</span>
</div>
<div class="boxMenu">
<div class="boxContainer"><a href="inspirations.html">INSPIRATIONS</a>
</div>
<div class="boxContainer"><a href="programs.html">PROGRAMS</a></div>
<div class="boxContainer"><a href="tutorials.html">TUTORIALS</a></div>
<div class="boxContainer"><a href="articles.html">ARTICLES</a></div>
</div>
<div class="description">
<div class="boxTitle">
text content
</div>
<div class="information">
<div class="boxTitle">
<p class="unterpunkt left">Information</p>
</div>
<div class="boxText"><img src="blender.png"/>
<table>
table content
</table>
</div>
</div>
<div class="features">
<div class="boxTitle">
<p class="unterpunkt left">FEATURES</p>
</div>
<!--Features-->
<ul>
li content
</ul>
</div>
And the CSS for the list box:
.features {
width:55%;
margin-right:1%;
float:left;
margin-top:50px;
}
.features ul {
padding:40px;
background-color:#fff;
width:100%;
height:100%;
box-sizing: border-box;
}
.features li {
color:#555;
float:left;
width:49%;
height:40px;
text-align:center;
padding-top:12px;
margin-right:2px;
box-sizing: border-box;
border:1px solid #888;
}
HopefullyI did nothing wrong in this post? Sorry for the messy code. I appreciate every comment!