css - HTML: Can't get DIV to wrap tightly around inner divs -
i've looked around stackoverflow solutions, , far none of them working. i'm trying span wrap tightly around interior divs, goes little bit wider divs inside. i've tried different display, float, margin, , padding properties no luck.
#column1, #column2, #column3 { display:block; float:left; width:33%; height:100vh; text-align:center; border: 1px solid black; } #weather_header { width:70%; border: 5px outset skyblue; background-color: skyblue; color: white; } #weather_body { width:70%; border: 5px inset skyblue; background-color: lightblue; color: black; } #clock_header { width:70%; border: 5px outset skyblue; background-color: skyblue; color: white; } #clock_body { width:70%; border: 5px inset skyblue; background-color: lightblue; color: black; } div.widget_box { display: inline-block; border: 1px solid black; } div.widget_header { float:left; text-align:left; padding: 5px 10px; display:inline-block; border-radius:8px 8px 0 0; font-weight:bold; } div.widget_body { float: left; padding: 10px; display: inline-block; border-radius: 0 0 8px 8px; text-align:center; margin: 0 auto; } body {height:100vh;} html {height:100vh;} basically widget_box class holds header , body classes. want span's width match width of div boxes (which contain widgets of varying size).
any offer appreciated!
edit: html code
<html> <head> <title>dashboard </title> <!--importing jquery page--> <script type="text/javascript" src="jquery-1.7.2.js"></script> <!--importing stylesheet page--> <link type="text/css" href="dashboard_stylesheet.css" rel="stylesheet"></link> </head> <body bgcolor = "white"> <div id="column1"> <div class="widget_box"> <div class="widget_header" id="weather_header">weather</div> <div class="widget_body" id="weather_body"> <script type="text/javascript" src="http://netweather.accuweather.com/adcbin/netweather_v2/netweatherv2ex.asp?partner=netweather&tstyle=whteyell&logo=1&zipcode=73127&lang=eng&size=9&theme=blue&metric=0&target=_self"></script> </div> </div> <div class="widget_box"> <div class="widget_header" id="clock_header">world clock</div> <div class="widget_body" id="clock_body"> <div align="center" style="margin:15px 0px 0px 0px;background:#000000;width:200px;padding:12px"> <noscript> <div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold"> <a style="padding:2px 1px;margin:2px 1px;font-size:12px;line-height:16px;font-family:arial;text-decoration:none;color:#000" href="http://localtimes.info">world time </a> </div> </noscript> <script type="text/javascript" src="http://localtimes.info/world_clock.php?widget_number=11002&cp3_hex=ff0000&cp2_hex=000000&cp1_hex=ffffff"></script> </div> </div> </div> </div> <div id="column2">column 2</div> <div id="column3">column 3</div> </body> </html>
ok. first, answer question, you're problem here: span.widget_box{margin:3px;}
do instead: http://jsfiddle.net/n6fps/
span.widget_box{ display: inline-block; margin: 0; border: 1px solid black; } second, @danielepolencic said, poorly structured put divs inside of spans reasons mentioned.
is you're going for? http://jsfiddle.net/n6fps/2/ if not, think should post question , consider linking image representation or wire frame of end goal. seems asking separate question , you're struggling fundamental understanding of css. think benefit to spend hour going through online tutorial this: http://www.tutorialspoint.com/css/index.htm. also, i'd recommend inspecting code firebug or chrome developer tools (right click, inspect element) allows make changes in real time , see how things work.
Comments
Post a Comment