i've attached a link below for a web page where i am facing the problem of the nav elements breaking into two lines on a smaller screen or a screen resize and also the section "ABOUT US" faces the same problem where one of the boxes breaks into a seperate line..
float ul#menu to the right. set your margin to "margin: 0 2% 0 0;" putting a margin on the left was the problem. If you make the browser small enough it will go to two lines, this is un-avoidable without using media queries. This fix gives you a greater amount of real estate before that happens though.
cheers,
Not totally sure about this. I am thinking that the floats are what is messing it up. Try not floating them, setting the display to inline block and just using margins to position them .
the problem is the borders. at a certain point 3 * 27.5% + 2 * 6% + 6 * 0.5em becomes too large for the container. You could reduce the width of each div; or change the box-sizing from content-box (standard box model) to border-box, which will include the borders in the 27.5% figure
Didn't i already do that? With this "float ul#menu to the right. set your margin to "margin: 0 2% 0 0;" putting a margin on the left was the problem. If you make the browser small enough it will go to two lines, this is un-avoidable without using media queries. This fix gives you a greater amount of real estate before that happens though. cheers," ?
i've attached a link below for a web page where i am facing the problem of the nav elements breaking into two lines on a smaller screen or a screen resize and also the section "ABOUT US" faces the same problem where one of the boxes breaks into a seperate line..
http://f7-preview.biz.nf/karthick.co.nr/
also a screen shot: http://i.imgur.com/PNaZz.png http://i.imgur.com/AdJE9.png
float ul#menu to the right. set your margin to "margin: 0 2% 0 0;" putting a margin on the left was the problem. If you make the browser small enough it will go to two lines, this is un-avoidable without using media queries. This fix gives you a greater amount of real estate before that happens though. cheers,
hey but what about the "about us section"
I don't understand what you want to accomplish with the "About us" section.
you will find 3 divs in the about us section.if you resize the screen you will find the last div(box) going down
Not totally sure about this. I am thinking that the floats are what is messing it up. Try not floating them, setting the display to inline block and just using margins to position them .
the problem is the borders. at a certain point 3 * 27.5% + 2 * 6% + 6 * 0.5em becomes too large for the container. You could reduce the width of each div; or change the box-sizing from content-box (standard box model) to border-box, which will include the borders in the 27.5% figure
hey thanks your solution of border-box worked.Would be nice if you help me solve the other one too
Didn't i already do that? With this "float ul#menu to the right. set your margin to "margin: 0 2% 0 0;" putting a margin on the left was the problem. If you make the browser small enough it will go to two lines, this is un-avoidable without using media queries. This fix gives you a greater amount of real estate before that happens though. cheers," ?
i tried doing that :-( it didnt work..