CODEWITHSUNDEEP
css
Macko Tarana
Macko Tarana

Reputation: 185

CSS - Float: left on the same line

enter image description here

.htabs { /* horizontal tabs */
    display: table;
}

.htabs li { /* horizontal tab */
    position: relative;
    float: left;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAMklEQVQIW2M8e3r/fw4OdgZk8OPHTwbGq5eP/QcxYJIwNlgCpBokAAIwBfglsBqFy3IAqdosZ0m+BQ8AAAAASUVORK5CYII=);
    border-left: 1px solid #e1dfd2;
    border-top: 1px solid #e1dfd2;
    border-right: 1px solid #e1dfd2;
    margin-right: 1px;
    display: table-row;
}

.htabs li a { /* horizontal tab link */
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #444444 !important;
    text-shadow: -1px -1px rgba(229,227,215,1), 1px 1px rgba(229,227,215,1);
    z-index: 1;
    padding: 0 7px;
    line-height: 30px; 
}

I'm trying to make a fully responsive website and now i need some help. Look at the picture, when i resize the browser window to a smaller size - "tabs" are moving to the second line what looks bad. How can i force them to stay on one line ?

Upvotes: 1

Views: 110

Answers (3)

lvarayut
lvarayut

Reputation: 15349

I would say that the thing that you are doing is not the responsive website!

The first step to creating the responsive layouts is to plan out what resolutions you want to cater for. Common resolutions include the 320px portrait width of smartphones, 768px portrait width of tablets, 1024px landscape width of tablets.

In order to create a responsive website, you should use Media queries. For example, 

@media screen and (max-width: 960px) {      
    #content {
        margin: 0 20px 0 0;
    }
}

In you case, you must decide what are the size of screen that you want to display in different designs.

@media screen and (max-width: 960px) { 


@media screen and (max-width: 758px) { 


}

@media screen and (max-width: 524px) { 

}

You can learn how to Create a responsive website step by step

EDIT : I just added the width: 20%; into the .htabs li It makes each li tag can be shirked. Moreover, you should change font-size to be smaller and larger depending on the browser size. So, just put the following instruction in each media query and try to modify the font-size to suit the browser size.

.htabs li { /* horizontal tab */
    width: 20%;
    ....
}

.htabs li a {
    font-size: 10px;
}

Upvotes: 1

Hamed mayahian
Hamed mayahian

Reputation: 2343

you are using "px" instead of "%" and "em , rem" attribute, you should using % or "em" for padding or width in the responsive design,

Upvotes: 1

Rápli András
Rápli András

Reputation: 3923

You should wrap the menubar into an element with height and width specified to avoid this. Also, you should add overflow:hidden attribute to this wrapper.

Upvotes: 1

Related Questions