UnknownPlayer Posted October 10, 2010 Share Posted October 10, 2010 I have webpage with sidebar(on left side) and main (where are news), now i wonna to make 1 more sidebar on right side. But i cant make that, can someone help me ? Here is style for sidebar left and main: #sidebar-left { float: left; width: 16%; margin: 0; padding: 0; background-color: #FFFFFF; } #main { float: right; margin: 0; padding: 0; width: 66%; } I tried to make #sidebar-right, and i put float: right; and width: 16%;, but i dont know what to to with #main, becouse there is float: right;, when i remove that fload from #main, than side gone crazy, i mean design of webpage. How can i make that work? Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/ Share on other sites More sharing options...
Alex Posted October 10, 2010 Share Posted October 10, 2010 What makes you believe this belongs in the PHP Coding section? Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1120853 Share on other sites More sharing options...
Stephen68 Posted October 10, 2010 Share Posted October 10, 2010 you main should not float I think.. #sidebar-left { float: left; width: 16%; margin: 0; padding: 0; background-color: #FFFFFF; } #main { margin: 0; padding: 0; width: 66%; } #sidebar-right { float: left; width: 16%; margin: 0; padding: 0; background-color: #FFFFFF; } or something like that, you might have to indent it on the left and right sdies to make room for the sidebars. Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1120880 Share on other sites More sharing options...
UnknownPlayer Posted October 10, 2010 Author Share Posted October 10, 2010 I tried that, but it does not work :S Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1120887 Share on other sites More sharing options...
UnknownPlayer Posted October 10, 2010 Author Share Posted October 10, 2010 Any other ideas? Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1120912 Share on other sites More sharing options...
mds1256 Posted October 11, 2010 Share Posted October 11, 2010 left sidebar needs to be floated left main content box needs to be floated left right side bar needs to be floated right Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121011 Share on other sites More sharing options...
UnknownPlayer Posted October 11, 2010 Author Share Posted October 11, 2010 I have done that, but there is new problem, my webpage now dont have good look, its tight, i mean there is no space between left, main and right panel, i wonna to put left 16%, main 66%, right 16%, then 2% will be between. Can i make that ? Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121051 Share on other sites More sharing options...
mds1256 Posted October 11, 2010 Share Posted October 11, 2010 adjust the sizes and add a margin e.g. Left = 16% Middle = 66% Right = 16% You have 2% left over.... this isnt a lot so it will look tight any how. give the middle a margin-left of 1% and give the right a margin-left of 1% thus using up the 2% but like i say 1% between them isnt a lot so it will look tight..... recommend reducing the size of the middle box and add that to the margins. Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121170 Share on other sites More sharing options...
UnknownPlayer Posted October 11, 2010 Author Share Posted October 11, 2010 That works, but now i got another problem, see the pic: Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121214 Share on other sites More sharing options...
mds1256 Posted October 12, 2010 Share Posted October 12, 2010 the main div's that are aligned to the left, what are these called (what id do they have) You will need to give that a margin-left of 16%+spacer so if it is currently 2% space then add margin-left:18% this should push them inline with the main div at the top Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121414 Share on other sites More sharing options...
UnknownPlayer Posted October 12, 2010 Author Share Posted October 12, 2010 #main { float: left; margin: 0; margin-left: 1%; width: 65%; padding: 0 2px 0px 2px; } #sidebar-left { float: left; width: 16%; margin: 0; padding: 0; background-color: #FFFFFF; } #sidebar-right { float: right; width: 16%; margin: 0; padding: 0; margin-left: 1%; background-color: #FFFFFF; } You see, problem is at #main, while is left side there webpage is good, but on bottom, when there is not left side, now main become left :S How can i fix that? Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121438 Share on other sites More sharing options...
mds1256 Posted October 12, 2010 Share Posted October 12, 2010 the divs that are now left aligned which should be centred between the two side bars, are these seperate and what are their names (ids) Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121483 Share on other sites More sharing options...
UnknownPlayer Posted October 12, 2010 Author Share Posted October 12, 2010 No they are not separated, i use like this: <div id="sidebar-left">....</div> <div id="sidebar-right">....</div> <div id="main">....</div> What should i do? Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121600 Share on other sites More sharing options...
mds1256 Posted October 13, 2010 Share Posted October 13, 2010 strange, be better if you could post your html as well as your css see the following a very basic layout..... HTML <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="left"></div> <div id="main"> <p>asdasdasd</p> <p>asda</p> <p>sd</p> <p>asda</p> <p>sd</p> <p>asdasdfsdf</p> <p>sdf</p> <p>sdf</p> <p>sd</p> <p>fs</p> <p> </p> <p>dfs</p> <p>df</p> <p>sd</p> <p>fs</p> <p>df</p> <p>sf</p> <p>ds</p> <p>f</p> </div> <div id="right"></div> <div id="footer"></div> </div> </body> </html> CSS body{ margin: 0; } #wrapper{ position:relative; margin: 0 auto 0 auto; width:800px; height:100%; } #header{ background:#000099; width:800px; height:150px; } #left{ background:#FF0000; float:left; width:16%; height:200px; } #main{ background:#0099FF; float:left; width:66%; margin-left:1%; } #right{ background:#00CC00; float:right; width:16%; height:200px; margin-left:1%; } #footer{ background:#663366; clear:both; height:100px; } Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121695 Share on other sites More sharing options...
UnknownPlayer Posted October 13, 2010 Author Share Posted October 13, 2010 There is my html code: <?php include("includes/meta.php"); ?> <body> <!-- wrap starts here --> <div id="wrap"> <!-- header --> <div id="header"> <span id="slogan">DotA Serbia Official Website</span> <!-- top menu --> <?php include("includes/top_menu.php"); ?> </div> <div id="header-logo"> <a href="http://dota.rs/"><div id="logo"></div></a> </div> <div id="sidebar-left" ></div> <div id="sidebar-right" ></div> <div id="main" ></div> </div> <?php include("includes/footer.php"); ?> And #wrap class is: #wrap { margin: 0 auto; width: 90%; } Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1121946 Share on other sites More sharing options...
UnknownPlayer Posted October 15, 2010 Author Share Posted October 15, 2010 Any solution ? :S Quote Link to comment https://forums.phpfreaks.com/topic/215559-float-at-div/#findComment-1122475 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.