Menu
just started a tutorial on flexbox, this is their code: https://jsfiddle.net/bradtraversy/bu0ecodm/1/
I tried creating a really basic google. For some reason, the boxes and containers aren't displaying properly. No matter how much I change the padding or border size/color nothing changes
HTML:
<html>
<head>
<link rel="stylesheet" href="google-code.css">
<script src="google-code.js"></script>
</head>
<body>
<div class="left-container">
<div class="icon-box">
<h3> google </h3>
</div>
</div>
<div class="middle-container">
<div class="search-box">
<h1>search</h1>
<div class="tools-box">
<h1>tools</h1>
</div>
</div>
</div>
<div class="right-container">
</div>
</body>
</html>
CSS
.left-container{
display:flex;
}
.left-container div{
border: 1px #ccc solid;
padding: 10px;
}
.middle-container{
display:flex;
}
.middle-container div{
border: 1px #ccc solid;
padding: 30px;
}
.search-box{
flex:1;
order:2;
}
.tools-box{
flex:2;
order:1;
}
This is what's displayed:
This is what I expected:
701
asked May 08 '26 00:05
Here is a great resource on how flex-box works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
But I think this more closely matches what you are looking for according to your drawing.
HTML
<html>
<head>
<link rel="stylesheet" href="google-code.css">
<script src="google-code.js"></script>
</head>
<body>
<div class='flex-box'>
<div class="left-container">
<div class="icon-box">
<h3> google </h3>
</div>
</div>
<div class="middle-container">
<div class="search-box">
<h1>search</h1>
</div>
<div class="tools-box">
<h1>tools</h1>
</div>
</div>
</div>
</body>
</html>
CSS
.flex-box{
display:flex;
}
.left-container > div{
border: 1px #ccc solid;
padding: 10px;
}
.middle-container{
display:flex;
flex-direction:column;
border: 1px #ccc solid;
width:100%;
}
.middle-container > div{
border: 1px #ccc solid;
margin: 0px 0px 5px 0px;
}
.search-box{
order:1;
}
.tools-box{
order:2;
}
DISPLAY
Display
166
answered May 11 '26 13:05
There, only changed in your HTML
<body>
<div class="left-container">
<div class="icon-box">
<h3> google </h3>
</div>
<div class="icon-box"> <!-- HERE -->
<div class="middle-container">
<div class="search-box">
<h1>search</h1>
</div>
</div>
<div class="middle-container">
<div class="tools-box">
<h1>tools</h1>
</div>
</div>
</div>
</div>
<div class="right-container">
</div>
</body>
NOTE:
Try to name your CSS classes meaningfully, and don't repeat them when they have different names but same attributes actually, so for example: .left-container & .middle-container are the same, why don't you just call them row, same for your .search-box & .tools-box, why don't you call them col.
In my case i just renamed the classes until i solve this out, and i was like, so we've got a row with 2 columns, and inside the second column, we've got 2 rows, each row has 1 column inside of it, and that was it!
Another NOTE:
If you want to make the search & tools stretch to the end, just wrap them with a col class. (in your case just change icon-box in your html to either search-box or tools-box). I added a comment next to it, it says "HERE".
Hope this helped.
45
answered May 11 '26 12:05
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With