-1
Вот мой HTML и CSS для упражнений, я не понимаю, почему моя граница в разделе обертывает весь контент. Я хотел бы иметь два независимых завернутых раздела: «intro» и «main».Почему моя граница в разделе обертывания всего содержимого?
https://jsfiddle.net/fhd9eLnq/
@font-face {
font-family: myFont src: url(BebasNeue-webfont.woff);
}
body {
font-family: myFont;
width: 90%;
margin: auto;
}
h1,
h2 {
display: inline;
color: #016008;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 40px;
}
li {
display: inline;
}
li a {
text-align: center;
text-decoration: none;
}
img {
position: relative top: 0px;
right: 20px;
float: left;
margin: 5px;
border: 1px solid grey;
}
.intro {
float: right;
}
.primarynav {
list-style-type: none;
color: #016008;
text-align: right;
}
.secondnav {
display: block;
text-align: inherit;
}
.main {
padding: 10px;
border: 1px solid grey;
}
.intro {
border: 1px solid grey;
margin: 15px;
}
.news1 {
width: 60%;
background-color: #dddddd;
margin: 15px;
}
section {} footer {
background-color: #dddddd;
}
fieldset {
background-color: white;
}
mark {
color: black;
background: none;
font-weight: bold;
}
.latestnews {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 365px;
width: 33%;
padding: 5px;
}
.suscribe {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 350px;
width: 33%;
padding: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Welcome to BootsWorld</title>
<link rel="stylesheet" type="text/css" href="boots.css" />
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>BOOT</h1>
<h2>WORLD</h2>
</div>
<ul class="primarynav">
<li><a href="#">Site map</a>
</li>
<li><a href="#">Privacy policy</a>
</li>
<li><a href="#">Accessibility</a>
</li>
</ul>
<ul class="secondarynav">
<li><a href="#">HOME</a>
</li>
<li><a href="#">SHOP</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li><a href="#">ABOUT US</a>
</li>
<li><a href="#">CONTACT US</a>
</li>
<li><a href="#">SUBSCRIBE</a>
</li>
</ul>
</nav>
</header>
<article class="intro">
<header>
<img src="boots.png" alt="boots image" />
<h2>Welcome to boot world</h2>
</header>
<p>BootWorld is the largest online footwear retailer in the UK.<a href="#">Our shop</a> always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why <a href="mailto:#">not send us a message.</a>
</p>
</article>
<section class="main">
<article class="news">
<header>
<h2>NEW IN THE SHOP</h2>
</header>
<div class="news1">
<h3>CLASSIC COWBOY BOOTS</h3>
<p>Stand out from the crowd in a pair of classic cowboy boots. Available for Ladies and Gents from only
<mark class="black">£49.99</mark>
</p>
<h3>MILITARY BOOTS</h3>
<p>Hard-wearing Men's military boots, guaranteed to withstand all weathers. From only
<mark class="black">£69.99</mark>
</p>
<h3>ROMAN SANDALS</h3>
<p>Get ready for summer with some stylish roman sandals. From only
<mark class="black">£39.99</mark>
</p>
<h3>OFFICE SHOES</h3>
<p>You don't have to wear boring shoes to the office. Check out our new stock of Ladies and Gents fashionable office shoes from only
<mark class="black">£44.99</mark>
</p>
</div>
</article>
<aside class="latestnews">
<h3>Latest News</h3>
<p>Our seasonal sale has kicked off again! make sure you stop by our online shop to pick up a bargain.</p>
<footer>Posted by: Joe</footer>
</aside>
<aside class="suscribe">
<h3>Subscribe</h3>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form>
<fieldset>
<legend>SIGN UP NOW!</legend>
<p>
<label for="yourname">Your name</label>
<br/>
<input type="text" name="yourname" id="yourname" size="20" />
</p>
<p>
<label for="emailaddress">email address</label>
<br/>
<input type="text" name="emailaddress" id="emailaddress" size="20" />
</p>
<button onclick="myFunction()">Sign Up</button>
</fieldset>
</form>
</aside>
</section>
<footer class="pagefooter">
<h3>OUR ADDRESS:</h3>
<p>Malet Street,
<br/>London, WC1E 7HX</p>
</footer>
</body>
</html>
Оба элемента независимо друг от друга ограничены, но поскольку вы «плаваете» один из них без очистки или установки «переполнения», он выглядит так, как он делает. Вам нужно будет объяснить или показать, какой желаемый результат вам нужен, чтобы кто-нибудь предложил предлагаемый подход. –