0

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!

Captain Obvlious
  • 19,754
  • 5
  • 44
  • 74
fare
  • 1
  • http://stackoverflow.com/questions/8554043/what-is-clearfix – Dmitriy Jun 02 '15 at 19:24
  • @Dmitriy So I add a class "clearfix" to the div containing the list and define a pseudo class for clearfix in CSS? Somehow that doesn't work or I'm not doing it right. – fare Jun 02 '15 at 19:46
  • @Dmitry Okay got it to work. Thank you! – fare Jun 02 '15 at 19:51

0 Answers0