Why wont 2column work?
Question
I am trying create a webpage displayed in multi column. I figured one column on left side would contain the main content and on the right side would be just other information which would take less space. I've created 3 div sections: wrapper, main_content, sidebar. The CSS stuff is on top and HTML on bottom. For some reason this isn't working. Is one of the other containers/elements such as body or maybe article preventing this from working?
<?xml version="1.0" encoding="UTF-8"?> <!--is this necessary? was in the linktastic example-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
a:link{
color:blue; <!--is this even necessary? oesnt overide the css for OL above-->
text-decoration: none;}
a:visited{color:#silver;}
a:hover{background-color: #B5DCF5;
color:white;
text-decoration:underline;
font-weight:bold
}
#art2{
margin-top: 1.5em; <!--Interestingly, when you don't give attritbute values to this child class, it will inheir parent class attribute vals-->
}
article{
background-color: white;
width: 94%;
border: 1px solid black;
margin-bottom: .625em;
margin: auto;
<!--WHYYY?????-->
padding: 2%;
}
body{
background-color: #7eb4e9 ; <!--background color edit-->
}
caption {
display: table-caption;
font-size: 1.375em;
text-align: center;
margin-bottom: 1.5%;
}
figure{
text-align: center;
margin-right: 1.375em;
margin-left: 1.375em;
padding: 1.5%;
}
figcaption{
margin-top: 1%;
text-align: center;
font-size: 1.375em;
font-style: italic;
color: black;
}
footer{
text-align: center;
padding: 5%;
}
header {
display: block;
background-color: white;
width: 85%;
margin: auto;
}
h1{
font-size: 3.75em;
color: #FF9900 ;
font-weight: Bold;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
font-style: normal;
text-align: center;
}
h2{
font-size: 2.5em;
color: #064E7C;
font-weight: normal;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
font-style: normal;
text-align: center;
}
img {
border: .5em solid #ddd;
border-radius: .5em;
padding: .938em;
width: 56.25em;
height: 18.75em;
}
#navlist
{
border-bottom: 1px solid #FFCC66;
border-top: 1px solid #FFCC66;
margin-bottom: 1.875em;
padding-left: 5.25em;
padding-right: 5.25em;
background-color: #FF9900;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.62em;
padding-bottom: 0.1875em;
padding-top: 0.1875em;
}
#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #FF9900;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #064E7C;
font-weight: bold;
text-decoration: none;
}
#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 0.0625em solid #000000;
padding: 0.0625em;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
}
#navlist li
{
padding-right: 0.0625em;
display: inline;
font-size: 0.5em;
}
#navlist ul
{
margin: 0em;
padding: 0em;
}
#navlist #active a { background-color: #FFCC66; }
ol{font-size: 1.25em;
color: #064E7C;
margin-left: 5%;
}
p{
font-size: 1.15em;
color: black;
font-weight: normal;
font-variant: normal;
font-family: "Verdana";
font-style: normal;
margin-right: 1.875em;
margin-left: 1.875em;
padding: 1.5%;
}
p.date{<!--only affects paragraphs with class "date"-->
font-size: 0.9375em;
color: grey;
font-weight: normal;
font-variant: normal;
font-family: "Times New Roman", Times, serif;
font-style: italic;
margin-right: 1.875em;
margin-left: 1.875em;
}
table{
background-color: #B5DCF5;
font-family: arial;
height: 15.625em;
width: 68%;
border: 0.125em solid #064E7C;
border-spacing: .312em;
margin-left:15%;
margin-right:15%;
margin-bottom: 5%;
text-align: center;
padding: 2.5%;
}
th{background-color: silver;}
td{background-color: white;}
#wrapper{ width: 900px;
height: 100%;
margin-left: auto;
margin-right: auto;}<!--if not needed delete-->
#wrapper #main_content{
width: 300px;
float: left;
}
#wrapper #sidebar {
width: 600px;
float: right;
}
</style>
<title> Jigme's Blog </title>
</head>
<body>
<header>
<h1>Mechanics of a Perfect Jumpshot!</h1>
</header>
<hr />
<!--horizontal line-->
<figure>
<img src="collagepic.jpg" alt="feet"><!--do CSS-->
<figcaption>
Break down of Chef Curry's perfect shot (photo edited via ed)
</figcaption>
</figure>
<article>
<nav>
<ul id="navlist">
<li id="active"><a href="homepage.html" id="current">Home </a></li>
<!--shows current page ur on-->
<li><a href="page1.html">The Base </a></li>
<li><a href="page2.html">Shoulder Alignment </a></li>
<li><a href="page3.html">BallPlacement </a></li>
<li><a href="page4.html">Elbows In </a></li>
<li><a href="page5.html">The Arc </a></li>
</ul>
</nav>
<br>
<br>
<div id="wrapper">
<div id="main_content">
<!--each blog post must be enclosed with article tag-->
<h2>Introduction</h2>
<p class="date">Article by: Jigme Ritzekura, Updated: Sept. 06, 2016 - 08:05 am</p>
<p>
To master the "perfect jumpshot", one must have a good grasp of the basic mechanics of shooting a basketball first. On this site,
we will break the jumpshot into 5 foundational components and elaborate on them. These include:
</p>
<ol>
<li>The Base</li>
<li>Shoulder Alignment</li>
<li>Ball Placement</li>
<li>Elbows In</li>
<li>The Arc</li>
</ol>
<p>
If you really want to improve your shooting accuracy, merely
knowing how to shoot is not enough. You must go out and implement these methods and allow your muscle memory to kick in. In due time,
you will see significant improvement. For example, check out the before and after statistics of John Roberts below (all shots were
taken from the free-throw range):
</p>
<table summary="This table shows the shooting statistics of player before learning the 5 methods for success. ">
<thead>
<caption>Before applying the methods</caption>
<tr>
<th>Distance From Basket</th>
<th>Shot Attempts</th>
<th>Shot Made</th>
<th>FG %</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4"><strong>*** (Total FG% Accuracy: 50%) </strong></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Free Throw</td>
<td>100</td>
<td>65</td>
<td>65%</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three Point</td>
<td>100</td>
<td>35</td>
<td>35%</td>
</tr>
</tbody>
</table>
<table summary="This table shows the shooting statistics of player before learning the 5 methods for success. ">
<thead>
<caption>After applying the methods</caption>
<tr>
<th>Distance From Basket</th>
<th>Shot Attempts</th>
<th>Shot Made</th>
<th>FG %</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><strong>*** (Total FG% Accuracy: 64%) </strong></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Free Throw</td>
<td>100</td>
<td>80</td>
<td>80%</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three Point</td>
<td>100</td>
<td>48</td>
<td>48%</td>
</tr>
</tbody>
</table>
</p>
</article>
<article id="art2">
<p> Now that you are convinced, you can learn more about each segments in more detail in the links below:
<nav>
<ul>
<li><a href="page1.html">The Base</a></li>
<li><a href="page2.html">Shoulder Alignment</a></li>
<li><a href="page3.html">Ball Placement</a></li>
<li><a href="page4.html">Elbows In</a></li>
<li><a href="page5.html">The Arc</a></li>
</ul>
</nav>
</p>
</article>
</div><!--closing tag for "#main_content"" -->
<div id="sidebar">
<article>
<p>
Hello, this is the side bar of the webpage. In here will contain information about subscribing to our page
by submitting your contact info. Look out for more materials!
</p>
</article>
</div><!--closing tag for ""#sidebar""-->
<br>
<br>
</div> <!--closing tag for "#wrapper"-->
<footer>
<small>Copyrights 2016 - Jigme </small>
</footer>
</body>
</html>
1 answers
solution1
0 2016-10-02 18:50:24
its better you use display inline-flex in wrapper. and remove those float right left. otherwise they break down. According to your code. And Its also better if you use width as % CheckFiddle . In fiddle I use % . I added height and border for test only in #main_content and #sidebar .
Full Code of yours I have comment out where I found The error and change small part of css those are also commentout
<?xml version="1.0" encoding="UTF-8"?> <!--is this necessary? was in the linktastic example--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> a:link{ color:blue; <!--is this even necessary? oesnt overide the css for OL above--> text-decoration: none;} a:visited{color:#silver;} a:hover{background-color: #B5DCF5; color:white; text-decoration:underline; font-weight:bold } #art2{ margin-top: 1.5em; <!--Interestingly, when you don't give attritbute values to this child class, it will inheir parent class attribute vals--> } article{ background-color: white; width: 94%; border: 1px solid black; margin-bottom: .625em; margin: auto; padding: 2%; } body{ background-color: #7eb4e9 ; <!--background color edit--> } caption { display: table-caption; font-size: 1.375em; text-align: center; margin-bottom: 1.5%; } figure{ text-align: center; margin-right: 1.375em; margin-left: 1.375em; padding: 1.5%; } figcaption{ margin-top: 1%; text-align: center; font-size: 1.375em; font-style: italic; color: black; } footer{ text-align: center; padding: 5%; } header { display: block; background-color: white; width: 85%; margin: auto; } h1{ font-size: 3.75em; color: #FF9900 ; font-weight: Bold; font-variant: small-caps; font-family: "Times New Roman", Times, serif; font-style: normal; text-align: center; } h2{ font-size: 2.5em; color: #064E7C; font-weight: normal; font-variant: small-caps; font-family: "Times New Roman", Times, serif; font-style: normal; text-align: center; } img { border: .5em solid #ddd; border-radius: .5em; padding: .938em; width: 56.25em; height: 18.75em; } #navlist { border-bottom: 1px solid #FFCC66; border-top: 1px solid #FFCC66; margin-bottom: 1.875em; padding-left: 5.25em; padding-right: 5.25em; background-color: #FF9900; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.62em; padding-bottom: 0.1875em; padding-top: 0.1875em; } #navlist a, #navlist a:link, #navlist a:visited { border: 1px solid #FF9900; padding: 1px; padding-left: 0.5em; padding-right: 0.5em; color: #064E7C; font-weight: bold; text-decoration: none; } #navlist a:hover, #navlist a:active, #navlist a:focus { border: 0.0625em solid #000000; padding: 0.0625em; padding-left: 0.5em; padding-right: 0.5em; text-decoration: none; } #navlist li { padding-right: 0.0625em; display: inline; font-size: 0.5em; } #navlist ul { margin: 0em; padding: 0em; } #navlist #active a { background-color: #FFCC66; } ol{font-size: 1.25em; color: #064E7C; margin-left: 5%; } p{ font-size: 1.15em; color: black; font-weight: normal; font-variant: normal; font-family: "Verdana"; font-style: normal; margin-right: 1.875em; margin-left: 1.875em; padding: 1.5%; } p.date{<!--only affects paragraphs with class "date"--> font-size: 0.9375em; color: grey; font-weight: normal; font-variant: normal; font-family: "Times New Roman", Times, serif; font-style: italic; margin-right: 1.875em; margin-left: 1.875em; } table{ background-color: #B5DCF5; font-family: arial; height: 15.625em; width: 68%; border: 0.125em solid #064E7C; border-spacing: .312em; margin-left:15%; margin-right:15%; margin-bottom: 5%; text-align: center; padding: 2.5%; } th{background-color: silver;} td{background-color: white;} #wrapper{ display:inline-flex; <!--MY EDIT [add this and remove the width coz every div width by default 100%]--> margin-left: auto; margin-right: auto;}<!--if not needed delete--> #wrapper #main_content{ width: 30%; <!--MY EDIT [30% using from wrapper]--> } #wrapper #sidebar { width: 60%; <!--MY EDIT [30% using from wrapper]--> } </style> <title> Jigme's Blog </title> </head> <body> <header> <h1>Mechanics of a Perfect Jumpshot!</h1> </header> <hr /> <!--horizontal line--> <figure> <img src="collagepic.jpg" alt="feet"><!--do CSS--> <figcaption> Break down of Chef Curry's perfect shot (photo edited via ed) </figcaption> </figure> <article> <!-- My EDIT[You start this article Section before wrapper but close this before wrapper end tag] --> <nav> <ul id="navlist"> <li id="active"><a href="homepage.html" id="current">Home </a></li> <!--shows current page ur on--> <li><a href="page1.html">The Base </a></li> <li><a href="page2.html">Shoulder Alignment </a></li> <li><a href="page3.html">BallPlacement </a></li> <li><a href="page4.html">Elbows In </a></li> <li><a href="page5.html">The Arc </a></li> </ul> </nav> <div id="wrapper"> <div id="main_content"> <!--each blog post must be enclosed with article tag--> <h2>Introduction</h2> <p class="date">Article by: Jigme Ritzekura, Updated: Sept. 06, 2016 - 08:05 am</p> <p> To master the "perfect jumpshot", one must have a good grasp of the basic mechanics of shooting a basketball first. On this site, we will break the jumpshot into 5 foundational components and elaborate on them. These include: </p> <ol> <li>The Base</li> <li>Shoulder Alignment</li> <li>Ball Placement</li> <li>Elbows In</li> <li>The Arc</li> </ol> <p> If you really want to improve your shooting accuracy, merely knowing how to shoot is not enough. You must go out and implement these methods and allow your muscle memory to kick in. In due time, you will see significant improvement. For example, check out the before and after statistics of John Roberts below (all shots were taken from the free-throw range): </p> <table summary="This table shows the shooting statistics of player before learning the 5 methods for success. "> <thead> <caption>Before applying the methods</caption> <tr> <th>Distance From Basket</th> <th>Shot Attempts</th> <th>Shot Made</th> <th>FG %</th> </tr> </thead> <tfoot> <tr> <td colspan="4"><strong>*** (Total FG% Accuracy: 50%) </strong></td> </tr> </tfoot> <tbody> <tr> <td>Free Throw</td> <td>100</td> <td>65</td> <td>65%</td> </tr> </tbody> <tbody> <tr> <td>Three Point</td> <td>100</td> <td>35</td> <td>35%</td> </tr> </tbody> </table> <table summary="This table shows the shooting statistics of player before learning the 5 methods for success. "> <thead> <caption>After applying the methods</caption> <tr> <th>Distance From Basket</th> <th>Shot Attempts</th> <th>Shot Made</th> <th>FG %</th> </tr> </thead> <tfoot> <tr> <td colspan="5"><strong>*** (Total FG% Accuracy: 64%) </strong></td> </tr> </tfoot> <tbody> <tr> <td>Free Throw</td> <td>100</td> <td>80</td> <td>80%</td> </tr> </tbody> <tbody> <tr> <td>Three Point</td> <td>100</td> <td>48</td> <td>48%</td> </tr> </tbody> </table> <!-- </p> My EDIT[extra p closing tag remove] --> <!-- </article> My EDIT[You need to close this article section after the #wrapper ] --> <article id="art2"> <p> Now that you are convinced, you can learn more about each segments in more detail in the links below: <nav> <ul> <li><a href="page1.html">The Base</a></li> <li><a href="page2.html">Shoulder Alignment</a></li> <li><a href="page3.html">Ball Placement</a></li> <li><a href="page4.html">Elbows In</a></li> <li><a href="page5.html">The Arc</a></li> </ul> </nav> </p> </article> </div><!--closing tag for "#main_content"" --> <div id="sidebar"> <article> <p> Hello, this is the side bar of the webpage. In here will contain information about subscribing to our page by submitting your contact info. Look out for more materials! </p> </article> </div><!--closing tag for ""#sidebar""--> </div> <!--closing tag for "#wrapper"--> </article><!-- My EDIT[You need to close this article section after the #wrapper] --> <footer> <small>Copyrights 2016 - Jigme </small> </footer> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
2Column CSS Layout
Matching column height in 2column layout
why wont this jquery work?
Why wont $(this).children() work for me?
Why wont this work in Internet Explorer?
Why wont my Animation work?
Why slideshow wont work on server but work offline
Why VBS wont work in my IE at all?
Why wont my CSS slideshow work?
Why wont my hover command work?
Related Tags