Can’t figure out some simple CSS

  • Resolved MaddTechWF

    (@maddtechwf)


    15 years, 9 months ago

    I have the following in my HMTL (before I convert it for WordPress). The image that is in my #page will not fill the height correctly. Any suggestions?

    index.html

    <div class="container">
        	<div id="header">
            	<h1><a src="/"></a></h1>
            </div>
            <div id="page">
               <div id="content">
                   <p>Lorem Ipsum</p>
               </div>
            <div id="sidebar">
                    <div id="searchform">
                         <form method="get" id="search" action="#">
                            <fieldset>

                                <input type="text" class="searchbar" name="s" id="s" />
                                <input type="submit" class="search" value="Search" />
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

    Here is the CSS:

    .container {
	width:100%;
	height: 100%;
	margin: 0 auto;
}

#page {
	background: /*#41424e*/  url('images/nav.png');
	border-radious: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	margin: 0 auto;
	text-align: left;
	width: 960px;
	padding-top:20px;
	clear:both;
}

#content {
	float: left;
	margin-left:20px;
	width: 540px;
	padding:20px;
	background: rgb(245, 245, 234);
	border-radious: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#sidebar {
	float: left;
	margin: 0 20px 0 20px;
	padding: 0 20px;
	width: 280px;
	background: rgb(245, 245, 234);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

Viewing 3 replies - 1 through 3 (of 3 total)
  • Lindquist

    (@lindquist)

    15 years, 9 months ago

    The problem is that you are not using clear correctly. I’m not great at explaining how the syntax is supposed to work, but basically the clear needs to come after the floats. In other words, putting clear on #page does nothing.

    Adding a footer would be an easy solution:

    <div id="page">   <div id="content"> <p>Lorem Ipsum</p> </div>
                    <div id="sidebar"> Some code. </div>
                    <div id="footer"> Some code. </div>
</div> <!-- end page -->

    You can then add the style clear:both (left should also work in this case) to #footer.

    Alternatively, you can Google “clearfix.” There are multiple solutions to solving this without adding extra content.

    Thread Starter MaddTechWF

    (@maddtechwf)

    15 years, 9 months ago

    @lindquist
    Thanks for that. I found my solution on Google.
    `
    #page:after {
    content: “”;
    display: block;
    clear: both;
    }
    `

    My last question is how can I make my sidebar and content be the same height if one is longer than the other?

    Lindquist

    (@lindquist)

    15 years, 9 months ago

    There’s not an easy way to do that and insure that it doesn’t break. You can use display: table/display: table-cell, but it won’t work in IE6/7.

    Here’s an article about it: http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

    Otherwise, you could always specify the height of both the content and sidebar, but unless your pages are always a similar height that could be a problem.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Can’t figure out some simple CSS’ is closed to new replies.