float at div

UnknownPlayer · 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?

Alex · October 10, 2010

What makes you believe this belongs in the PHP Coding section?

Stephen68 · 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.

UnknownPlayer · October 10, 2010

I tried that, but it does not work :S

UnknownPlayer · October 10, 2010

Any other ideas?

mds1256 · 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

UnknownPlayer · 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 ?

mds1256 · 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.

UnknownPlayer · October 11, 2010

That works, but now i got another problem, see the pic:

mds1256 · 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

UnknownPlayer · 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?

mds1256 · 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)

UnknownPlayer · 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?

mds1256 · 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;
}

UnknownPlayer · 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%;
}

UnknownPlayer · October 15, 2010

Any solution ? :S

Sign In

float at div

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information