html - DIV element does not cover all of its content -
i have issue div on page. it's 1 have, , covers middle of page. few tweaks in css, made go way down.
the problem though, video(which inside div element), sneaking out so:
here's html:
<html> <head> <link rel="shortcut icon" href="images/favicon.ico" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <title>arthur</title> <meta content="text/html" charset="windows-1251"> </head> <body background="images/background2.jpg"> <a href="main.html"><img class="imgborder" src="images/button.png" align="left" height="50"></a> <div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;"> <center><img width="60%" src="images/logo2.png"></center> <br><br> <center><img class="imgborder" height="300" src="images/muller.jpg"></center> <font size="5" color="crimson" face="calibri"> <center><p align="justify">... </p> <p align="justify">...</p> <p align="justify">...</p></font></center> <center><iframe width="640" height="360" src="..." frameborder="5" allowfullscreen></iframe></center> <font size="5" color="crimson" face="calibri"><p>thomas muller</p></font> </div> </body> </html>
and here's css:
@charset"utf-8"; /* css document*/ /*this section links*/ a:link { font-weight:normal; color:crimson } a:visited { font-weight:normal; color:crimson; } a:hover { font-weight:bold; color: royalblue; font-variant:small-caps; } /*this section paragraph section*/ p { font-style:normal; font-size:18px; } blue { color:crimson; } /*this section image's black border.*/ .imgborder { border-color: crimson; border:thick; border-style:outset; } .body { background-color: #0000ff; } html, body { height:100%; } #wrapper { margin: 0 auto; width: 990px; height:100%; overflow:hidden; position:relative; } #navigation { margin: 0 auto; width: 990px; height: 55px; background-color: #fff; } #bottom half { margin: 0 auto; width: 990px; height: 100%; background-color: #4d3c37; } div { /* set div full width , height */ width: 100%; height: 100%; } p { margin-left:2cm; margin-right:2cm; }
the solution can think of manually tweaking black frame's height, or perhaps adding a
overflow: hidden;
property frame (in rather difficult-to-understand tag system, believe <center>
).
right now, <iframe>
element overflowing parent container (the black box). specifying height box, can control size.
by specifying overflow: hidden
, can hide box's overflow - doing 1 of 2 things:
hiding leaks out of box, preventing elements larger box's size show parts seem "unbound" container's edges
if elements chosen semantic html, many elements not bound
height
,width
automatically size fit contents
another possible solution specify position: relative
and/or float: none
both container , children, solves problem.
to emphasize again, it's difficult test , debug code you've given because out of date.
Comments
Post a Comment