Welcome to WebmasterWorld Guest from 54.162.248.199

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning float-elements

     
8:03 pm on Jan 20, 2013 (gmt 0)



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)




8:26 pm on Jan 20, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
8:37 pm on Jan 20, 2013 (gmt 0)



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)
1:01 am on Jan 21, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month