WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Can't figure out some simple CSS (4 posts)

  1. MaddTechWF
    Member
    Posted 4 years 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;
    }
  2. Lindquist
    Member
    Posted 4 years 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.

  3. MaddTechWF
    Member
    Posted 4 years 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?

  4. Lindquist
    Member
    Posted 4 years 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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.