seany123 Posted November 9, 2010 Share Posted November 9, 2010 CSS code .left{ height: 50px; font-size: 32px; text-align: left; margin-left: 100px; } .right{ height: 20px; width: 50%; text-align: right; margin-right: 100px; } html code <html> <head> <title>Welcome to my website</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> </head> <body> <div class="left"> LOGO </div> <div class="right"> RIGHT </div> </body> </html> above is the code... basically im having a couple of problems, For some reason when i edit height of .left it changes the text for things in .right (without changing .left) i also want .left to stop around 30% across the screen... allowing for .right Quote Link to comment Share on other sites More sharing options...
seany123 Posted November 9, 2010 Author Share Posted November 9, 2010 also when i add things to .right for example i added a logo... it went down below the .left stuff Quote Link to comment Share on other sites More sharing options...
haku Posted November 10, 2010 Share Posted November 10, 2010 What does "it changes the text for things in .right" mean? As for your other problem (having the left on the left, right on the right) you need to look into floats. Quote Link to comment Share on other sites More sharing options...
seany123 Posted November 10, 2010 Author Share Posted November 10, 2010 What does "it changes the text for things in .right" mean? As for your other problem (having the left on the left, right on the right) you need to look into floats. what it meant was when changing say height of the .left class it would actually change the height of text which was inside my .right class.... however i think i have that fixed. Currently my problem is that when i start to make the browser smaller.. text from the .right class moves below text from the .left class.... rather than just falling off the right side of the screen.. .topbar{ clear: both; margin-left: auto; margin-right: auto; Width: 100%; Height: 82px; position: absolute; Background: #ffffff ; Color:#ff0000; Font-size:18px; display: block; background-color: #FF4A12; } .left{ float: left; font-size: 20px; text-align: left; margin-left: 100px; } .right{ margin-top: 5px; float: right; font-size: 12px; text-align: left; margin-right: 100px; } Quote Link to comment Share on other sites More sharing options...
haku Posted November 10, 2010 Share Posted November 10, 2010 That's how floats work. If you don't want it to do that, put the floated elements in a container, then give the container a fixed width. Quote Link to comment Share on other sites More sharing options...
seany123 Posted November 11, 2010 Author Share Posted November 11, 2010 i want it to cover 100% of the page for left to right... if i gave it a fixed width it would be to short or long. Quote Link to comment Share on other sites More sharing options...
haku Posted November 11, 2010 Share Posted November 11, 2010 You can give them percentage widths instead then. Quote Link to comment Share on other sites More sharing options...
seany123 Posted November 11, 2010 Author Share Posted November 11, 2010 giving a container percetage widths now means that the .right comes in again. Quote Link to comment Share on other sites More sharing options...
haku Posted November 11, 2010 Share Posted November 11, 2010 comes in? Quote Link to comment Share on other sites More sharing options...
seany123 Posted November 11, 2010 Author Share Posted November 11, 2010 it moves in... as in like moves with the browser getting smaller. i have a new problem now - #centered { text-align: left; background-image:#000; margin: 10px auto 10px auto; border: black solid 20px; width: 810px; background-image: url('/images/content-bg.jpg'); background-position: top right; -moz-border-radius:15px; -webkit-border-radius:15px; behavior:url(border-radius.htc); } i have the above code and im using it as a box on my website.. then i have this html code: html> <head> <title>Welcome</title> <link type="text/css" rel="stylesheet" href="css/test.css" /> </head> <body background="/images/body-bg.jpg"> <div id="centered"> HELLO <table width="10%" height="10%"> <form method="index.php"> <input type="submit" name="submit" value="submit"> </form> </table> </div> </body> </html> now my problem is that the button reaches down the entire size of the css box and i dont know how to fix it. Quote Link to comment Share on other sites More sharing options...
seany123 Posted November 11, 2010 Author Share Posted November 11, 2010 understand? Quote Link to comment Share on other sites More sharing options...
haku Posted November 11, 2010 Share Posted November 11, 2010 Stick with your original problem. If you have another issue, you should open another thread. As to your original problem, You either have to pick a fixed width or a variable width. If you want a fixed width, with two elements floating beside each other, that don't move when the browser is shrunk, you can do this: <div id="container"> <div id="col1">Some stuff for column 1</div> <div id="col2">Some stuff for column 2</div> </div> CSS: #col1, #col2 { width:50%; float:left; } #container { width:900px; } Quote Link to comment Share on other sites More sharing options...
seany123 Posted November 11, 2010 Author Share Posted November 11, 2010 okay i understand that... im gonna add to to my code soon. but im still stuck with this other problem... of <input> buttons, text fields etc and even <img>s seem to stretch across the who css container box. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.