html - 2 column layout that extends the length of the page as content is added to sidebar div -


I am working on creating a page with a 2 column layout, header, and footer. I am using div, html, and css.

I am experiencing the problem is the left column which is created by div # side. Beer is spread on parsets while adding content.

The solution I am looking for is ; I want to push 'the footer down' to the left column and extend the length of the div # contentWrapper when more content Is Added to Div # sideBar

I have looked through many tutorials, but I can not seem to know this. Can someone direct me to a tutorial that will solve this problem or help me to modify the code below, so that the page that creates, expand it (press the footer below) as the # # ############### strong> Screenshot below shows the result of the code below.

Enter image here

 < Code> & style; style = "text / css" & gt; # Wpm {width: 900px; Margins: Auto; } #Headers {background color: # 0F0; } #contentWrapper {background-color: #ff0; } #footer {background-color: # 00F; } # Edge {float: left; Width: 200px; Height: 100%; Color: # F00; } # Content {width: 700px; Margin-left: 200px; Background color: #fff; } P {margin: 0 pixels; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "wrapper" & gt; & Lt; Div id = "header" & gt; Home | Page One | Page Two & lt; / Div & gt; & Lt; Div id = "contentWrapper" & gt; & Lt; div id = "sidebar" & gt; & Lt; P & gt; & Lt; Ul & gt; & Lt; Li & gt; Home and lt; / li & gt; & Lt; Li & gt; Page A & lt; / li & gt; & Lt; Li & gt; Page Two & lt; / li & gt; & Lt; / Ul & gt; & Lt; / P & gt; & Lt; P & gt; hgfds & lt; / P & gt; & Lt; P & gt; kgjkfhghf & lt; / P & gt; & Lt; P & gt; Jkfhgjdffgfhj & lt; / P & gt; & Lt; P & gt; Ljkfhgjdf & lt; / P & gt; & Lt; P & gt; Klgjhg & lt; / P & gt; & Lt; P & gt; lkgjhfg & lt; / P & gt; & Lt; P & gt; lgkjhfg & lt; / P & gt; & Lt; P & gt; & Nbsp; & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "content" & gt; & Lt; P & gt; Content "Content" for the ID goes here & lt; / P & gt; & Lt; P & gt; & Nbsp; & Lt; / P & gt; & Lt; P & gt; & Nbsp; & Lt; / P & gt; & Lt; P & gt; & Nbsp; & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; P & gt; CopyRight 2014 & lt; / P & gt; & Lt; P & gt; Home | Page One | Page Two & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;    

  #footer {background color: # 00F; Clean both; }   

You have to clean the float used on the edge, which you can do in the footer.

  # borderbar {float: left; Width: 200px; Height: 100%; Color: # F00; }   

Unless you need to expand the background, you need to add a tag inside the wrapper covering the flap

  & lt; / Div & gt; & Lt ;! - content div - & gt; & Lt; Div style = "clear: left" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - wrapper divis - & gt; & Lt; Div id = "footer" & gt;    

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -