Menu
I've been messing with CSS, trying to understand floats, etc. Here is what the issue looks like:
As you can see, the yellow box floats behind the gray and past it. How do I make it stop right before box Two? Here is my code:
<style>
/*resests begin*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
/*vertical-align: baseline; */
font-weight:normal;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/*resests end*/
body {
font-size:16px;
margin:5px;
}
h1 {font-size:2em;}
nav {
background-color:#ccc;
padding:5px;
width:200px;
height:200px;
margin:10px;
}
#a {
background-color:#FFC;
padding:10px;
}
.r-set {
padding-left:10px;
float:right;
}
</style>
</head>
<body>
<h1>Title</h1>
<nav class="r-set">
<p><a href="#">Two</a></p>
</nav>
<div id="a">
<h3>One</h3>
</div>
</body>
</html>
395
Is CSS float deprecated? In a word: no. The float property still exists in CSS as it did when Internet Explorer was a young browser, and still works the same.
none: This is the default value & the element does not float. left: Element floats on the left side of the container. right: Element floats on the right side of the container. initial Element will be set to its default value.
The float property specifies whether an element should float to the left, right, or not at all. Note: Absolutely positioned elements ignore the float property! Note: Elements next to a floating element will flow around it.
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
Apply overflow: hidden; to the non-floating box.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
