Positioning float-elements

[z3ko]

Hello everyone, this is my first post here. Im learning HTML/CSS for a month now.

Im building a simple web-site and I have few questions/problems.

Here is the code
[jsbin.com...]
here is the "website"
[jsbin.com...]

(please disregard the color/fonts etc, I didnt come to visual presentation yet)



My question is,

-what do I need to use to position text away from left edge of wrap div (in the case of #main container) and right edge of website (in the case of #main-right div) margin? padding?

-how do I properly make some space between my #main and #main-right div

-Im trying to use % instead of px everywhere so website displays same on different resolutions/devices , am I doing it correct ?


Basically im just trying to align two divs with text (one is floated left one right) correctly and nicely within wrap container.


So please could anyone help me, bcs Iv been trying different things for hours, for example take a look at my two spans (lol and lol1) , im sure thats the wrong way to do it, but I couldnt think of other solution)

[Hoople]

There is a spelling error in your style header - you meant #main-right below?

#main-rigt{
float:right;
width:20%;
display:inline-block;}

As to spacing on lol & lol1 - try using margin-right:1%; for lol1 and use margin-left:1%; for lol.

[z3ko]

indeed, thank you very much, now the width is working correctly and margins also started to work :)

one more question, when I open my website on my mobile phone, the 4th navigation button called "cetvrti" falls down one row, that also happens when I zoom out my website, how do I keep my navigation in one row (so it resize corectly)

[Hoople]

It shows that way here too (Firefox 18.0/32 on Ubuntu Linux 12.10).

Guessing without doing the math is it is the browser doing a cumulative rounding error. Try reducing the padding added to <li> slightly and see if it helps.