1

My layout is not obeying my commands.

I had trouble with a layout so I created a new basic box with sub-boxes to see what's going on, and no matter what I do the two 300px boxes won't fit side-by-side into the 600px box.

Also, when the 2nd 300px box is forced to a 2nd line there's an unexplained margin between it and the box above.

I checked CSS & HTML validators and they presented no errors.

Any insight to the cause of the annoyance would be greatly appreciated.

System: Chrome: Version 114.0.5735.106 (Official Build) (64-bit) Linux Mint 19.3 Cinnamon v:4.4.8, Kernel: 5.4.0-150-generic (Potential) pebkac model: 1969

<!DOCTYPE html>
<html lang="en">
<head>
<title>widthtest</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<style>

html, body {
border: 0;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font: normal 16px/16px Arial;}

main {
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}

#left, #right {
display: inline-block;
height: 300px;
width: 300px;
}

#left {
background: #cfc;
}

#right {
background: #ccf;
}

</style>
</head>

<body>

<main>
<div id="left">
</div>
<div id="right">
</div>
</main>

</body>
</html>

2 Answers 2

2

This is due to the white space. If you remove all white space between the divs, you'll get your intended pixel-perfect result.

html, body {
border: 0;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font: normal 16px/16px Arial;}

main {
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}

#left, #right {
display: inline-block;
height: 300px;
width: 300px;
}

#left {
background: #cfc;
}

#right {
background: #ccf;
}
<main>
<div id="left">

</div><div id="right">

</div>
</main>


However, I think a better way to go about this is to use Flexbox.

html, body {
border: 0;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font: normal 16px/16px Arial;}

main {
display: flex; /* <- */
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}

#left, #right {
/* display: inline-block; */ /* <- */
height: 300px;
width: 300px;
}

#left {
background: #cfc;
}

#right {
background: #ccf;
}
<main>
<div id="left">
</div>
<div id="right">
</div>
</main>

3
  • Thanks Tim. In my last comment I addressed the HTML manipulation and instead using font-size: 0; as it was the simplest solution I had found. I hadn't seen flex as a mentioned option anywhere and I didn't try that, yet. I'll test with it and see if I get the desired result of block-type objects, in this case testing using 300px boxes, but eventually in a layout for other content. If the block characteristic is not retained then I'll stick with using font-size: 0; in the parent element and then resetting the font to desired size in the child element.
    – w4phle
    Jun 11 at 3:20
  • @w4phle Flexbox is a powerful layout tool that makes hacks unnecessary. I recommend learning about it because a flexible box layout can be used in many situations on a webpage and be very helpful.
    – Tim R
    Jun 12 at 4:14
  • Thank you Tim, I'll check it out. Cheers.
    – w4phle
    Jun 13 at 5:26
1

2 x 300px elements won't fit into a 600px element. Try making them 295px each and you should see it work. Then you can experiment.

enter image description here

5
  • Except, if I change them to 600px wide each, they fit perfectly with no black showing. So, if one 600px box is permitted "into" a 600px box, then why not 2 x 300px boxes side-by-side? ``` #left, #right { display: block; height: 295px; width: 600px; } #left { background: #cfc; } #right { background: #ccf; margin: 5px 0 0; } ```
    – w4phle
    Jun 8 at 5:37
  • If I make them 300px and float them, it's fine, they're both allowed on the same line. ``` #left, #right { float: left; height: 300px; width: 300px; } #left { background: #cfc; } #right { background: #ccf; margin: 0; }```
    – w4phle
    Jun 8 at 6:27
  • Then float them. but that isn't what you were trying to do in the original question.
    – Steve
    Jun 8 at 6:44
  • Correct. I've been using child boxes to 100% fill parent boxes for 20 years and in the last week everything's breaking its layout. I couldn't fix it so that's why I created a simple box page to pare it down to the basics, but I still can't find the problem.
    – w4phle
    Jun 8 at 6:50
  • Additional: Considering the inline-block objects are treated as words, thus the unexpected spacing, the better and simpler fix for me is declaring font-size of 0px in the parent and then resetting the font-size within the child element (300px boxes). I found word-spacing and letter-spacing changes unnecessary; font-size: 0px on the parent element by itself eliminated the extra space and only required altering one CSS rule; much better than manipulating the content elements (div, p, etc.) in the child element (300px boxes). Hope that helps someone else.
    – w4phle
    Jun 8 at 18:06

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.