Question

I am having an issue with a design using table layout. So I am using 2 asides for the side navigation and a centered main section content (which is all wrapped in a section wrapper)
My text in the section wrapper has some white spacing at the top. It is due to the float left and right on the aside elements. If I remove them, the text goes back to the top but then my aside elements occupy the entire space (I have used a box border around the aside to show it, as I want to colour the aside element for my design so I don’t want it to take the entire space of the main body-content)

I have tried using top:0% but no luck.

Fiddle: http://jsfiddle.net/chou_one/nPAJc/

Answer 1

You can simply do it by changing the width and float.

According to your code, I made some changes:

I changed the float in #side-news2 from right to left.
And add width: 30% to #side-news, #side-news2, and #section-wrapper.
Note that all of the width (30% + 30% + 30%) cannot exceed the one in #body-content (which is set to be 90%)

#body-content {
    display: table;
    width:90%;     
    margin: 0 auto;
    background: lightblue;
    border-color: rgba(255, 255, 255, 0.7); /* highlight on inner box */
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 3px; /* FF */
    -webkit-border-radius: 3px; /* Safari, Chrome */
    border-radius: 3px; /* modern browsers */    
    -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);    
}

#side-news {
    border:1px solid black;
    width:30%;
        top:0%;
    display:table-cell;    
    float:left;
    list-style:none;    
}

#side-news2 {
    border:1px solid black;
    width:30%;
    display:table-cell;    
    float:left;
    list-style:none;      
}
#section-wrapper {
    width:30%;
    display:table-cell;  
    margin: 0px;
    float:left;
    top:0%;
    margin-top:0%;
    border:1px solid black;
    margin-top:0%;
}

​