Hi there

I have this header - see attached - that is going to be part of an accommodation table layout. Some of it will need to be in a table, however not the header part. I have also provided the link to the complete layout page for full perspective.

My query is: I am not confident that I have chosen the "best" way to layout each element in the green boxed area heading "Accommodation". I have copied the CSS elements for this header and wondered whether anyone could provide me some advice on whether it is the correct way. I have used floats instead of display:block, inline block and overflows.

However, I have also had to place a height on the div so the green background colour will show up. I don't usually like placing heights on things as they can be restricting and I'm not that happy with the CSS I have used.

Thanks in advance.

Header - http://www.tagdesign.co.nz/header-accomm.jpg Complete page - http://www.tagdesign.co.nz/bed-listing-page-layout.jpg

CSS for the Accomm heading section:

.accommodation .title-panel {
    clear:both;
    width: 480px;
    height: 40px;
    background-color: #aed941;
    padding: 0 10px;
    }
.accommodation .title-panel .left {
    float:left;
    width: 187px;
    margin-right: 20px; 
    padding-top: 7px;
}
.accommodation .title-panel .middle {
    float:left;
    width: 155px;
    margin-right: 70px;
    padding-top: 7px;
}   
.accommodation .title-panel .right {
    float:left;
    width: 48px;
    margin: 0;
}   

Start of html:

 <div class="box accommodation">
 <div class="title-panel"><!-- this class here I am not sure about -->

1 answer

0
points

The "best" way to do this is subjective. It depends on you, really. For me, the "best" way is the way that works. You want to make sure that it meets your needs in terms of standards compliance and cross-browser functionality. After that, clean and straight-forward code beats complicated messy in my book. And personally --and without having seen the html-- I think your code is fine (assuming it works across the browsers you want it to).

Answered over 5 years ago by Abinadi Ayerdis
  • Hi. OK thanks for that feedback. For what it's worth, I managed to get rid of the height by placing a float:left which is one of the problems I wanted to fix. Cheers Felicia over 5 years ago