Home/ Questions/Q 8885007
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T21:12:12+00:00

I have used emptycanvas as a starting point for wordpress. I’ve set the .wrapper

  • 0

I have used emptycanvas as a starting point for wordpress. I’ve set the .wrapper to 80% width with a max-width:1250px;

The Container, which holds the content/sidebar is set to width 100%, and the content has no width set, and is set to float:left; with no other options, the sidebar is set to 350px; with float:right….for some reason it refuses to float and always goes below the content! If I set a width of for example 500px on the content everything goes into place….I thought without a specified width it will automatically adjust to the items floating around it…so what am I doing wrong here?

Unfortunately this is on a local server so I cannot show the exact code but there isn’t anything extra here that I haven’t told you..

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to rectify two problems for your layout to work as intended(please see below the code I just created based on your description)

    1. You need to specify the width of the content div. Otherwise, the width of the div will be determined by the widths of the content inside it. This cannot give you manageable layout.

    2. The two floated DIVs cannot be contained inside the container div (You can check this by giving different backgrounds to the container, content and sidebar divs as I did below) This is because, non-floating division cannot contain only floated contents, with its default display setting (default display property for the div is block). To solve this problem, you need to change the display property of the container to table. The other way to contain the content and sidebar inside the container is to add one more non-floated div and clear it from floated objects(clear:both).

      The HTML 

      <body>

    <div id="wrapper">
        <div id="container">
                <div id="content">
                     <h1> I am inside content. what will happen if I increase the content in here? </h1>
                </div><!--End of content-->
                <div id="sidebar">
                      <h1> I am inside the side bar </h1>
                </div><!--End of sidebar-->
        </div><!--End of container-->

    </div><!--End of wrapper-->

</body>

    The CSS

    #wrapper{
margin:0 auto;
width:80%;
max-width:1250px;
}
#container{
width:100%;
background:red;
display:table; /*This is necessary to wrap the two floated contents inside. The other way of achieving same result is to add some non-floated div and set to clear floated contents*/
}
#content{
float: left;
background:green;
}
#sidebar{
width:350px;
float: right;
background:blue;
}
    • 0