Home>

I'm studying with a book called HTML&CSS Design Book.
This is specified inside css. I am adding text to box3 with the p tag, but if the text is short, box4 will be displayed beside it, but if the text in the p tag is long, box4 will be broken.

. box3 {
    float: left;
    width: 70;
}
.box4 {
    float: left;
    width: 30;
}

Currently it looks like this image. Is box3 over 70%? It seems that the side menu of box4 has been broken. I do n’t know the cause and I ’m in trouble.

A site where you can check the error syntax I checked, but there was no error although there was a cautionary part.

Current HTML and CSS code
<! DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width">
<link rel = "stylesheet" href = "grid-guide.css">
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "box1">
<div>
<h1><a href = "#">Here.</a></h1>
</div>
</div>
<div class = "box2">
    <nav class = "menu">
        <ul>
            <li><a href = "#">Top</a></li>
            <li><a href = "#">General goods</a></li>
            <li><a href = "#">Gadget</a></li>
            <li><a href = "#">Food</a></li>
            <li><a href = "#">going out</a></li>
            <li><a href = "#">Contact Us</a></li>
        </ul>
    </nav>
</div>
<div class = "boxA">
    <div class = "box3">
        <article>
            <h1>Heading</h1>
            <p>ah ah ah ah ah ah ah ah ah ah ah 000000000000000000000000000000000000</p>
            <p>no good no good no good no good 00000000000000000000000000000000000000000000000000000000000000</p>
            <p>Uu Uu Uu Uu Uu 000000000000000000000000000000000000000000000000 Uu Uu Uu Uu
            <p>yeah 0000000000000000000000000000000000000000000000000000000000000000000000000 yeah yeah yeah yeah yeah yeah yeah yeah yeah</p>
        </article>
    </div>
    <div class = "box4">
        <aside class = "sidemenu">
            <ul>
                <li><a href = "#">Descriptive map</a></li>
                <li><a href = "#">Making tomatoes starting from seedlings</a></li>
                <li><a href = "#">Convenient relationship between food and smartphones</a></li>
                <li><a href = "#">How to make your battery last longer</a></li>
            </ul>
        </aside>
    </div>
</div>
<div class = "box5">
    BOX5
</div>
</body>
</html>
@ charset "UTF-8";
body {font-family: 'Meirio',
        'Hiragino Kaku Gothic Pro', 'sans-serif'}
.site h1 a {color: # 000000;
                text-decoration: none;}
.site h1 {margin: 0;
                font-size: 30;}
/*navigation*/    
.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu li a {
    display: block;
    padding: 5px;
    color: # 000000;
    font-size: 14px;
    text-decoration: none;
}
.menu il a: hover {background-color: #eeeeee}
.menu ul: after {
    content: "";
    display: block;
    / * If i don't enter this, it will continue without line breaks * /
    clear: both;
}
.menu li {
    float: left;
    width: auto;
}
.kiji h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 36px;
}
.kiji p {
    margin-top: 0;
    margin-bottom: 20px;
}
/*side menu*/
.sidemenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidemenu li a: hover {
    background-color: #eeeeee;
}
.sidemenu h1 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: dotted 2px #dddddd;
    color: # 666666;
    font-size: 18;
}
@media (min-width: 768px) {
    .box3 {
        float: left;
        width: 70;
    }
    .box4 {
        float: left;
        width: 30;
    }
}
.boxA: after {
    content: "";
    display: block;
    clear: both;}
.box3 {
    float: left;
    width: 70;
}
.box4 {
    float: left;
    width: 30;
}
  • Answer # 1

    What if the

    width is in units?

  • Answer # 2

    Although it is not related to the subject, liveweave is not a site for checking syntax errors, but a site for checking the operation quickly, so use it for that purpose (of course, it works normally) Something that shouldn't work may not work)

    A proper editor has not only grammar checking but also coding style checking and automatic formatting functions, so choosing an editor is important to reduce mistakes. By the way, I often use Brackets.

    I am also worried about personally, but I think that there are many white spaces in the attribute value part of html. It is easy to see if it is easy to see, but if there is extra space, it may cause bugs when creating a dynamic site anyway if it is a static site ...
    I am also worried that the way of writing is not unified