I have attached my HTML along with my CSS code and a picture of the webpage. I can not figure out why there is a gap in the red background color at the bottom. Any help is much appreciated
/*
Landon Byrd
Fall 2021
Plain Red #f60d41
Rich Red #f6130d
Orioles Orange #f64d0d
Sunset Orange #f6870d
Golden Yellow #f6c10d
*/
/* Global settings */
h1 {
text-align: center;
font-family: Papyrus
}
h2 {
text-align: center;
color: #f6130d;
text-decoration: underline
}
.wrapper {
width: 85%;
margin: 0 auto;
max-width: 960px;
}
/* Nav Section */
.nav {
width: 85%;
margin: 0 auto;
background-color: #f6130d;
text-align: center;
}
.menu {
float: left;
width: 25%
}
/* Main section */
.banner {
justify-content: center;
background-color: #f6c10d;
text-align: center;
}
.bulletPoints {
text-align: center;
}
section {
background-color: #f6870d;
color: #f60d41;
font-style: italic;
margin: 25px 50px 75px;
}
body {
background-image: url("images/background.jpeg");
}
.image1 {
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
/* Footer section */
* {
box-sizing: border-box;
}
.footer {
text-align: center;
background-color: #f6130d;
color: #f6c10d;
}
.box {
float: left;
width: 33.33%
}
.footer::after {
content: "";
clear: both;
display: table;
}
/* Copyright section */
.copyright {
text-align: center;
background-color: #f6130d;
color: #f6c10d;
}
<!DOCTYPE html>
<head>
<title>Augie's Custom T-shirts</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="menu">
<p>Home</p>
</div>
<div class="menu">
<p>Shop</p>
</div>
<div class="menu">
<p>Events</p>
</div>
<div class="menu">
<p>Contact Us</p>
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">Augie's Custom T-shirts</span></h1>
<h2>Custom T-shirts for you or your party.</h2>
<div class="bulletPoints">
<ul>
<li>Birthday parties</li>
<li>Vacation groups</li>
<li>Bachelorette Parties</li>
<li>Family reunions</li>
<li>Work team rewards</li>
<li>Business promotions</li>
</ul>
</div>
<br/>
</div>
<p id="Catch">
Do you have an event coming up, and want everyone to get in the spirit? T-shirts can bring a group together, make everyone feel connected, and let everyone know what you're celebrating.
</p>
<p>T-shirts can also be a great gift to someone that acknowledges their special interest or hobby.</p>
<p>Choose from one of our unique designs, or let us put your own design on a shirt for you.</p>
<div class="row">
<div class="column">
<img src="images/gorilla.jpg" alt="Gorilla" style="width:100%">
</div>
<div class="column">
<img src="images/pink.jpg" alt="Pink" style="width:100%">
</div>
<div class="column">
<img src="images/skull.jpg" alt="Skull" style="width:100%">
</div>
</div>
<p><strong>How it works:</strong></p>
<p>Browse our selection of unique designs, select the size and colors of the shirts you would like, and place your order. We will ship your shirts within three business days for in-stock shirts, or five days for custom size and colors.</p>
<figure>
<img src="images/t-shirt-colors.jpeg" alt="T-shirt colors" class="image1">
<figcaption>Choose from are variety of t-shirt colors!</figcaption>
</figure>
<p>Have a design of your own? Can't find the right sentiment? Call or email us to discuss the possibilities or get some ideas for your event.</p>
<p>Please note there will be a one time $15 charge for any custom graphics design.</p>
<h2><em>Contact us today!</em></h2>
</main>
<footer class="footer">
<div class="box">
<p>Augie's Custom T-shirts</p>
<p>(478) 555-1212</p>
<p>augieB#augiesTees.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for updates!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>100 Tanger Dr, Locust Grove, GA</p>
<p>2954 Watson Blvd Suite 100, Warner Robins, GA</p>
</div>
</footer>
<div class="copyright">
<h3> #copyright: Landon Byrd</h3>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</p>
</div>
</body>
Side note my verified CSS checker image is also not showing up at the very bottom of the page and the HTML checker is giving me the following error
Error: Stray end tag div.
From line 123, column 1; to line 123, column 6
just add h3{ margin-top: 0px; } to your css code to remove the white line between the red divs at the bottom of the side
add the div with 'class=copyright' inside the footer and remove the extra </div> at last
that h3 tag in your .copyright div taking the default
margin-block-start: 1em;
margin-block-end: 1em;
you can use
.copyright h3{
margin-block:0;
}
this will remove the white space..
or you can use
*{
margin:0;
padding:0;
}
this will remove the default margin and padding from the page
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
I've been trying a few different things to remove the second page on this page when printing. Is there something I am doing wrong?
I've placed:
page-break-after: avoid;
page-break-inside: avoid;
On to the last element on the page, so I'm just a little confused on what I'm doing wrong here.
Any suggestions would be appericated.
See the code below...
/* Custom Hero Styles */
.subhero1 {
background: #000;
height: 400px !important;
}
#media only screen and (min-width: 0px) and (max-width: 650px) {
.subhero1 {
background: #000;
height: 250px !important;
}
.subhero__content-container {
color: #fff !important;
}
}
/* Custom Cards */
.obs__fullcardheader {
border-bottom: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
font-size: 3.5vmax;
}
.obs__fullcard {
height: 400px;
width: 100%;
border: 5px solid #eee;
}
.obs__cardheader img {
max-width: 20%;
}
.obs__card {
height: 300px;
}
.fullcardwrapper {
background: #f6f6f6;
background-size: cover;
background-position: center;
padding-top: 30px;
line-height: 30px;
}
.cardwrapper {
padding: 30px;
}
.appicons img {
max-width: 160px;
}
.small__font {
font-size: 12px;
}
.obs__cardline2 {
font-size: 14px;
}
.obs__cardline1 a {
color: #000;
text-decoration: none;
cursor: pointer;
}
.obs__cardline1 a:hover {
color: #565656;
border-bottom: 1px solid #565656;
}
.obs__cardline2 a {
color: #000;
text-decoration: none;
cursor: pointer;
}
.obs__cardline2 a:hover {
color: #565656;
border-bottom: 1px solid #565656;
}
.coupon-btn-wrapper {
margin: 0 auto;
max-width: 300px;
}
.print-exclusions {
display: none;
}
#media (max-width: 650px) {
.obs__card {
width: 100%;
}
.obs__cardheader img {
max-width: 15% !important;
}
.obs__fullcardheader {
font-size: 4.5vmax;
}
.obs__couponhero-line1 {
padding-top: 20px;
}
}
#media (max-width: 1050px) {
.obs__card {
width: 100%;
height: 250px;
}
.obs__cardheader img {
max-width: 10%;
}
.cardwrapper {
padding: 0px;
margin-top: 0px;
}
.fullcardwrapper {
padding-top: 10px;
background: #fff;
}
.obs__fullcard {
border: 1px solid #eee;
}
.obs__fullcardheader {
font-size: 4.5vmax;
}
.coupon-btn-wrapper {
max-width: 280px;
}
}
.obs__couponhero-line1 {
font-size: 14px;
color: #000;
margin-bottom: 10px;
line-height: 18px;
padding-top: 30px;
}
.obs__couponhero-line2 {
font-size: 14px;
color: #000;
margin-bottom: 10px;
}
.obs__couponhero-barcode {
margin: 0 auto;
}
.obs__couponhero-line3 {
font-size: 14px;
color: #000;
margin-bottom: 10px;
margin-top: -30px;
}
.couponlinks a {
color: #fff;
background: #000;
text-decoration: none;
font-size: 14px;
padding: 15px;
}
#media print {
#page {
size: landscape
}
.obs__card {
width: 33%;
height: 250px;
}
.head-main,
.obs__cardline2,
.appicons,
.cust_service_headline,
.obs__accordion,
.coupon-btn-wrapper {
display: none;
}
.obs__fullcard {
height: 260px;
}
.cardwrapper {
margin-top: 10px;
max-width: 97.8%;
}
.obs__cardheader img {
max-width: 25%;
}
footer {
display: none;
}
.print-exclusions {
display: block;
padding-left: 14px;
margin-top: -115px;
margin-bottom: 0;
page-break-after: avoid;
page-break-inside: avoid;
}
.obs__fullcard {
width: 110%;
}
.obs-3 {
clear: none;
}
#page {
margin: 0;
}
body {
margin: 1.6cm;
}
}
<link href="https://media.offbroadwayshoes.com/css/obframe.css" rel="stylesheet"/>
<div class="frame fullcardwrapper">
<div class="obs__max1200">
<div class="obs__cards">
<div class="obs__fullcard">
<div class="obs__cardinner">
<div class="obs__fullcardheader">##offer##</div>
<div class="obs__couponhero-line1"><span class="new-line-mob">PLUS, BUY ONE, GET ONE</span> <span class="new-line-mob">50% OFF* YOUR 2ND PAIR</span>
<br /> *EXCLUSIONS APPLY</div>
<div class="obs__couponhero-line2">##tatic## · VALID THRU ##valid##</div>
<div class="obs__couponhero-barcode"> </div>
<div class="obs__couponhero-line3">##ifonline## <font style="font-weight:bold;">##onlinecode##</font></div>
<div class="obs__cardline3">
<div class="coupon-btn-wrapper">
<div class="obs-2-static couponlinks" style="text-align: center;">FIND YOUR STORE</div>
<div class="obs-2-static couponlinks" style="text-align: center;">PRINT COUPON</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="frame cardwrapper bg-split__greytowhite">
<div class="obs__max1440">
<div class="obs__cards">
<div class="obs__card">
<div class="obs__cardinner">
<div class="obs__cardheader"><img src="https://media.offbroadwayshoes.com/icons/bogo.svg" alt="" />
<br /> BOGO 50% OFF*</div>
<div class="obs__cardline1">Buy One, Get One 50%
<br /> Off Your 2ND Pair</div>
<div class="obs__cardline2"><a data-exctarget="#1">SEE DETAILS</a></div>
</div>
</div>
<div class="obs__card">
<div class="obs__cardinner">
<div class="obs__cardheader"><img src="https://media.offbroadwayshoes.com/icons/free-shipping.svg" alt="" />
<br /> FREE SHIPPING</div>
<div class="obs__cardline1">Get Free Shipping
<br /> on Orders $50 or More!</div>
<div class="obs__cardline2"><a data-exctarget="#2">SEE DETAILS</a></div>
</div>
</div>
<div class="obs__card">
<div class="obs__cardinner">
<div class="obs__cardheader"><img src="//media.offbroadwayshoes.com/icons/mobile-app.svg" alt="" />
<br /> DOWNLOAD THE APP</div>
<div class="obs__cardline1">Shopping at your finger tips! <a>Learn More</a>
<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="frame">
<div class="obs__max1440">
<div class="obs__spacer50 obs__mob-spacer20"> </div> <span class="cust_service_headline rightsideheading">Details & Exclusions</span>
<div class="obs__spacer10"> </div>
<div class="obs__accordion js-obs__accordion">
<div class="obs__accordion__item js-obs__accordion-item">
<div class="obs__accordion-header js-obs__accordion-header">Coupon Exclusions</div>
<div class="obs__accordion-body js-obs__accordion-body">
<div class="obs__accordion-body__contents">*Limit one coupon per transaction. COUPON MAY ONLY BE USED ONCE AND MAY NOT BE MODIFIED, COPIED OR UPLOADED. Excludes Flash Sales, special promotional events. Must present coupon at time of purchase, cannot be combined with other coupons or used for the purchase of Gift Card(s) and is not redeemable for cash. Offer excluded on certain styles and brands, including but not limited to: Adidas, Asics, Bear Paw, Birkenstock, Converse, Keds, Merrell, Puma, Rainbow, Reebok, Rockport, Saucony, Sperry, Teva, Koolaburra by Ugg, Tommy Hilfiger Kids’, online Timberland & Timberland Pro, plus all Nike styles. Discount is taken before taxes. CAN BE COMBINED WITH EARNED QUALIFYING REWARDS DOLLARS BUT NOT OTHER REWARDS COUPON OFFERS. See store associate for details.</div>
</div>
</div>
<!-- end of obs__accordion item -->
<div class="obs__accordion__item js-obs__accordion-item">
<div class="obs__accordion-header js-obs__accordion-header" id="1">BOGO 50% OFF 2ND PAIR</div>
<div class="obs__accordion-body js-obs__accordion-body">
<div class="obs__accordion-body__contents">*2nd pair must be of equal or lesser value. Excludes BOGO Free styles, Flash Sales, special promotional events, accessories and certain other styles, including but not limited to adidas, Asics, Bear Paw, Birkenstock, Converse, Keds, Koolaburra by Ugg, Merrell, Puma, Rainbow, Reebok, Rockport, Saucony, Sperry, Teva, Tommy Hilfiger Kids’, online Timberland & Timberland Pro, plus all Nike styles.</div>
</div>
</div>
<!-- end of obs__accordion item -->
<div class="obs__accordion__item js-obs__accordion-item">
<div class="obs__accordion-header js-obs__accordion-header" id="2">Free Shipping</div>
<div class="obs__accordion-body js-obs__accordion-body">
<div class="obs__accordion-body__contents">Free economy shipping offer valid on orders with a subtotal over $50 after all discounts are applied. (Subtotal does not include tax or shipping fees)</div>
</div>
</div>
<!-- end of obs__accordion item -->
</div>
<!-- end of obs__accordion item -->
<!-- end of obs__accordion -->
</div>
</div>
<div class="obs__spacer50 obs__mob-spacer20"> </div>
<div class="print-exclusions">
<div class="obs-3">
<p class="obs__bold">COUPON EXCLUSIONS
<p>
<p style="font-size:8px;">*Limit one coupon per transaction. COUPON MAY ONLY BE USED ONCE AND MAY NOT BE MODIFIED, COPIED OR UPLOADED. Excludes Flash Sales, special promotional events. Must present coupon at time of purchase, cannot be combined with other coupons or used for the purchase of Gift Card(s) and is not redeemable for cash. Offer excluded on certain styles and brands, including but not limited to: Adidas, Asics, Bear Paw, Birkenstock, Converse, Keds, Merrell, Puma, Rainbow, Reebok, Rockport, Saucony, Sperry, Teva, Koolaburra by Ugg, Tommy Hilfiger Kids’, online Timberland & Timberland Pro, plus all Nike styles. Discount is taken before taxes. CAN BE COMBINED WITH EARNED QUALIFYING REWARDS DOLLARS BUT NOT OTHER REWARDS COUPON OFFERS. See store associate for details.</p>
</div>
<div class="obs-3">
<p class="obs__bold">BOGO 50% OFF 2ND PAIR
<p>
<p style="font-size:8px;">*2nd pair must be of equal or lesser value. Excludes BOGO Free styles, Flash Sales, special promotional events, accessories and certain other styles, including but not limited to adidas, Asics, Bear Paw, Birkenstock, Converse, Keds, Koolaburra by Ugg, Merrell, Puma, Rainbow, Reebok, Rockport, Saucony, Sperry, Teva, Tommy Hilfiger Kids’, online Timberland & Timberland Pro, plus all Nike styles.</p>
</div>
<div class="obs-3">
<p class="obs__bold">FREE SHIPPING
<p>
<p style="font-size:8px;">Free economy shipping offer valid on orders with a subtotal over $50 after all discounts are applied. (Subtotal does not include tax or shipping fees)</p>
</div>
</div>
I'm doing something wrong with the css code and it doesn't look the way I wanted. I attached a link to the post to see how it is supposed to look like and a picture to see how it looks like now. I'm posting the HTML code as well as CSS code. I tried to find what I'm doing wrong but after spending 2 hours, trying to find what is wrong, I finally gave up and I started to look for help.
How it should look like
Current design
HTML
<header>
<img src="pc_logo.png" alt="Pandaisia Chocolates" />
<nav class="horizontal">
<ul>
<li>Home</li>
<li>The Store</li>
<li>My Account</li>
<li>Specials</li>
<li>Reviews</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="newRow">
<div class="col-2-3">
<article id="intro">
<h1>March Specials</h1>
<p>Spring is coming and we've got some mouth-watering specials to help you celebrate the change in seasons in style! Featured throughout March is our always-popular Chocolate Covered Strawberries / Rose Fruit Syrup Combo, now at the special low price
of $29.95. For that special someone, consider our Red Rose Select box of Spring chocolates. Remember that for every order of $25 or more, you receive a free truffle of your choice. For orders of $100 or more we throw in a four-piece gift box of
our signature chocolates and truffles.</p>
</article>
<div class="newRow">
<div class="col-1-3 specials">
<img src="pc_photo7.png" alt="" />
<h1>Red Rose Select</h1>
<p>A classic collection of 18 signature chocolates served with a romantic red rose for the special person in your life. One of our most popular box sets.</p>
<p>$24.95</p>
<p>Order Now</p>
</div>
<div class="col-1-3 specials">
<img src="pc_photo8.png" alt="" />
<h1>Your Choice</h1>
<p>Build your own collection of signature truffles and chocolates. Now you can choose old favorites from our 24-year history of award-winning chocolates and sweets.</p>
<p>$32.55</p>
<p>Order Now</p>
</div>
<div class="col-1-3 specials">
<img src="pc_photo9.png" alt="" />
<h1>Praline Signatures</h1>
<p>Delicious chocolate with delicious pralines presented in a beautiful and elegant box. Enjoy this fantastic collection inspired by the best Parisian chocolate shops.</p>
<p>$39.23</p>
<p>Order Now</p>
</div>
</div>
</div>
<div class="col-1-3" id="awardList">
<h1>Awards</h1>
<div class="awards" id="award1">
<img src="pc_award1.png" alt="" />
<p>Best of Show</p>
<p>Confectioners Association</p>
</div>
<div class="awards" id="award2">
<img src="pc_award2.png" alt="" />
<p>Five Stars</p>
<p>Confectioner Quarterly</p>
</div>
<div class="awards" id="award3">
<img src="pc_award3.png" alt="" />
<p>Best Chocolate</p>
<p>Food World</p>
</div>
<div class="awards" id="award4">
<img src="pc_award4.png" alt="" />
<p>Best Chocolate</p>
<p>Choco-Fest</p>
</div>
<div class="awards" id="award5">
<img src="pc_award4.png" alt="" />
<p>Best Dessert</p>
<p>Choco-Fest</p>
</div>
</div>
</div>
<footer>
Pandaisia Chocolates © 2017 All Rights Reserved
</footer>
CSS
body {
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 640px;
width: 95%;
}
/* Image Styles */
body img {
display: block;
width: 100%;
}
/* Horizontal Navigation Styles */
body>header>nav.horizontal li {
width: 16.66%;
}
nav.horizontal li {
display: block;
float: left;
}
nav a {
display: block;
}
/* Row Styles */
div.newRow {
clear: both;
width: 100%;
}
div.newRow:after {
clear: left;
content: "";
display: table;
}
/* Column Styles */
div[class^="col-"] {
float: left;
padding: 2%;
}
div.col-1-1 {
width: 100%;
}
div.col-1-2 {
width: 50%;
}
div.col-1-3 {
width: 33.33%;
}
div.col-2-3 {
width: 67.67%;
}
div.col-1-4 {
width: 25%;
}
div.col-3-4 {
width: 75%;
}
div[class^="col-"]:after {
clear: left;
content: "";
display: table;
}
/* Specials Styles */
div {
min-height: 400px;
outline: 1px dashed rgb(71, 52, 29);
}
/* Award Styles */
div#awardList {
position: relative;
height: 650px;
overflow: auto;
}
div.awards>div#award1 {
top: 80px;
left: 5%;
}
div.awards>div#award2 {
top: 280px;
left: 60%;
}
div.awards>div#award3 {
top: 400px;
left: 20%;
}
div.awards>div#award4 {
top: 630px;
left: 45%;
}
div.awards>div#award5 {
top: 750px;
left: 5%;
}
/* Footer Styles */
body>footer {
clear: both;
}
You have used wrong width value for the .col-2-3 i.e width: 67.67%...
....as col-1-3 has width: 33.33% and col-2-3 has width: 67.67%..it means the whole width will be 33.33%+67.67%=101%...which should be is 100%...
It should be width: 66.67%...Also apply box-sizing:border-box
div.col-2-3 {
width: 66.67%;
}
Fiddle Link
HTML
div.section{
/*border style code is skipped on this post*/
background-color: #99CCFF;
padding: 5px;
margin-top: 10px;
text-align: justify;
text-justify : auto;
overflow: hidden;
}
.topic{
/*border style code is skipped on this post*/
}
p{
overflow: hidden;
}
img{
float: right;
}
div#navi{
/*border style code is skipped on this post*/
margin: 5px;
width: 200px;
color: gray;
float: left;
}
div#navi h1{
text-align: left;
padding-left:10px;
}
div#navi ul{
margin-left: 0px;
}
<div id="body">
<div id="navi">
<h1>Links</h1>
<ul>
<li>Lab.</li>
<li>CSE # UNIV</li>
<li>W3Schools</li>
<li> Garden</li>
</ul>
</div>
<div class="section">
<h2><span class="topic">Cars</span>: 67 Shelby Mustang GT500 Convertible</h2>
<p>
<img src="67eleanorConv.jpg" alt="1967 shelby Mustang GT500 Convertible" title="1967 shelby Mustang GT500 Convertible" /> something..something..something..something..
</p>
</div>
<div class="section">
<h2><span class="topic">Sports</span>: Snowboarding</h2>
<p>
<img src="daaa.jpg" alt="Travis Rice Snowboard Jump" title="Travis Rice Snowboard Jump" /> something..something..something..something..something..
</p>
</div>
<div class="section">
<h2><span class="topic">Music</span>: Funk & Punk Rock</h2>
<p>
<img src="lesPaulBass.jpg" alt="Gibson Les Paul Bass" title="Gibson Les Paul Bass" /> something..something..something..something..
<br/>
<br/> something..something..something..something..
</p>
</div>
</div>
Code is so long,so i delete the part of border style in css.
I wrap div(id=nav) and div(id=section) into div(id=body)
I set a size of div that is at left side of nav div using "overflow="hidden".
but I can't set others.
The layout with a second column must still be a liquid layout -- that is, all parts of it should adjust in size accordingly when the browser size changes.
Here I post the link to the things I have and i want to:
Result that I wanna make
Current result of mine
The answer to your solution should be to set the navbar to absolute positioning. so that it will always extend the full height of the parent. Then you need to set position:relative to the parent div#body, Finally, the sections need to be adjusted to offset the navbar, so I do this by adding the CSS property margin-left:220px.
CSS:
div#navi {
/*border style code is skipped on this post*/
margin: 5px;
width: 200px;
color: gray;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
div#body {
position:relative;
}
div.section {
/*border style code is skipped on this post*/
background-color: #99CCFF;
padding: 5px;
margin-top: 10px;
text-align: justify;
text-justify: auto;
overflow: hidden;
margin-left:220px;
}
div#body {
position:relative;
}
div.section {
/*border style code is skipped on this post*/
background-color: #99CCFF;
padding: 5px;
margin-top: 10px;
text-align: justify;
text-justify: auto;
overflow: hidden;
margin-left:220px;
}
.topic {
/*border style code is skipped on this post*/
}
p {
overflow: hidden;
}
img {
float: right;
}
div#navi {
/*border style code is skipped on this post*/
margin: 5px;
width: 200px;
color: gray;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
div#navi h1 {
text-align: left;
padding-left: 10px;
}
div#navi ul {
margin-left: 0px;
}
<div id="body">
<div id="navi">
<h1>Links</h1>
<ul>
<li>Lab.</li>
<li>CSE # UNIV</li>
<li>W3Schools</li>
<li> Garden</li>
</ul>
</div>
<div class="section">
<h2><span class="topic">Cars</span>: 67 Shelby Mustang GT500 Convertible</h2>
<p>
<img src="67eleanorConv.jpg" alt="1967 shelby Mustang GT500 Convertible" title="1967 shelby Mustang GT500 Convertible" /> something..something..something..something..
</p>
</div>
<div class="section">
<h2><span class="topic">Sports</span>: Snowboarding</h2>
<p>
<img src="daaa.jpg" alt="Travis Rice Snowboard Jump" title="Travis Rice Snowboard Jump" /> something..something..something..something..something..
</p>
</div>
<div class="section">
<h2><span class="topic">Music</span>: Funk & Punk Rock</h2>
<p>
<img src="lesPaulBass.jpg" alt="Gibson Les Paul Bass" title="Gibson Les Paul Bass" /> something..something..something..something..
<br/>
<br/> something..something..something..something..
</p>
</div>