All geek questions in one place

CSS overflow issues

Hell, I always feel embarrassed about CSS. I keep reading books and articles / tuturials, but CSS is PITA!

I have the following code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing CSS</title>
<style type="text/css">
<!--
body {
    background: #dddddd;
    font: 12px "Trebuchet MS", Helvetica, sans-serif;
    color: #000;
}
.box {
    background: #FFF;
    width: 500px;
    border: 1px solid #999999;
    -moz-border-radius: 5px;
}
.box .content {
    background: #FFF;
    padding: 15px;
    -moz-border-radius: 5px;
}
.message {
    border: 1px solid #bbbbbb;
    padding: 10px;
    margin: 0px 0px 15px;
    background-color: #DDDDDD;
    color: #333333;
    -moz-border-radius: 5px;
}
.message.info {
    border-color: #9FD1F5;
    background-color: #C3E6FF;
    color: #005898;
}
._50\% {
    display: inline;
    float: left;
    margin: 0 2%;
    overflow: hidden;
    position: relative;
    width: 46%;
}
-->
</style>
</head>

<body>
    <div class="box">
        <div class="content">
            <div class="message info">Info message.</div>
            <div class="message _50%">Simple message.</div>
            <div class="message _50%">Simple message.</div>
        </div>
    </div>
</body>
</html>

But no matter what I do, I can not get the two “simple messages” to appear side by side, below the “Info Message”, I have already tried playing with display, overflowetc ... It seems that nothing works.

CSS overflow http://a.imagehost.org/0658/Testing-CSS_1279773508176.png

What am I missing?

+3
source share
5 answers

Your math is not entirely correct.

Let them start with the eyeball ....

Boxes Simple Messagehave a width:

2% + 46% + 2% + (1 px BORDER on each side) + (10px PADDING on each side)

This is more than 50%!

CSS box model , , CSS (, IE , ).

, border padding .message Simple Message.

Simple Message 41%, .

, , ....

, :

class box
    500px wide with a 1px border all around
        Pixels left to play with ==> 500

class content
    15px padding on the OUTSIDE of .content on all side. 
    content is INSIDE .box, the maximum width of .content is 500px
    but the padding is taking up some of this space (15*2 = 30px)
        Pixels left to play with ==> 470

class message info
    The maximum width of anything inside .content is 470px
    There are two _50% boxes, so each can have a max total width
      (including all the padding, border, margin) of 470/2 = 235px
    Width of 
        + 46% of 470px = 216.2          = 216px 
        + 2*10px padding                =  20px
        + 2*1px border                  =   2px
        + 2*(2% of 470px) = 2*9.4 = 2*9 =  18px
        ---------------------------------------
                                          256px! ==> 2*256 > 470

, 41%?

class box
        Pixels left to play with ==> 500

class content
        Pixels left to play with ==> 470

class message info
    Width of
        + 41% of 470px = 192.7          = 193px
        + 2*10px padding                =  20px
        + 2*1px border                  =   2px
        + 2*(2% of 470px) = 2*9.4 = 2*9 =  18px
        ---------------------------------------
                                          233px ==> 2*233 < 470

, 42% ,

42% of 470 = 197.4 = 197.
197 + 20 + 2 + 18 = 237
237 * 2 = 474........ and 474 > 470

, Firebug. , Layout, , Style, CSS!

:

.box .content {
      /* This lets .content expand in height with the floating divs inside it */
    overflow: auto;
}
+12

-, overflow: hidden .content. , . : , ( ) , .

+1

, ( ) CSS %.

, ( ).

+1

_50%, , _50% , content, % width px

css

._50\% {
    display: inline;
    float: left;
    margin: 0 2%;
    overflow: hidden;
    position: relative;
    width: 90px;
}

, div display: inline float, div . , margin padding, .

0

- ._50 , . 41%. inlne.

._50\% {
    float: left;
    margin: 0 2%;
    width: 41%;
}

.clear div , div .

.clear
{
   clear: both;
}


<body>
        <div class="box">
            <div class="content">
                <div class="message info">Info message.</div>
                <div class="message _50%">Simple message.</div>
                <div class="message _50%">Simple message.</div>
              <div class="clear"></div>
            </div>
        </div>
    </body>
    </html>

. - , , wokrk.

0

Source: https://habr.com/ru/post/1755904/

More articles:


All Articles