CODEWITHSUNDEEP
htmlcss
superspartan999
superspartan999

Reputation: 291

HTML: Can't get DIV to wrap tightly around inner divs

I've looked around StackOverflow for some solutions, and so far none of them are working. I'm trying to get my span to wrap tightly around its interior divs, but it always goes just a little bit wider than the divs inside. I've tried the different DISPLAY, FLOAT, MARGIN, and PADDING properties with 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 the widget_box class holds the header and body classes. I just want the span's width to match the width of the div boxes (which will contain widgets of varying size).

Any help you could offer would be most appreciated!

Edit: HTML Code

<html>

<head>
 <title>Dashboard </title>

 <!--Importing JQuery into page-->
 <script type="text/javascript" src="jquery-1.7.2.js"></script>

 <!--Importing Stylesheet into 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>

Upvotes: 0

Views: 2505

Answers (1)

Brad
Brad

Reputation: 6332

Ok. First, to answer your question, you're problem is here: span.widget_box{margin:3px;}

do this instead: http://jsfiddle.net/n6fpS/

span.widget_box{
display: inline-block;
margin: 0;
border: 1px solid black;
}

Second, as @danielepolencic said, its poorly structured to put divs inside of spans for the reasons he mentioned.

Is this what you're going for? http://jsfiddle.net/n6fpS/2/ If not, I think you should post another question and consider linking to an image representation or wire frame of your end goal. It seems your asking a separate question now and that you're struggling with a fundamental understanding of CSS. I think it would benefit you to to spend an hour going through an online tutorial like this: http://www.tutorialspoint.com/css/index.htm. Also, I'd recommend inspecting your code with firebug or chrome developer tools (right click, inspect element) as it allows you to make changes in real time and see how things work.

Upvotes: 1

Related Questions