How do I align 4 div elements horizontally?

1

I have 4 divs that I want to be black boxes with semi transparent backgrounds each containing non transparent text. I want the 4 boxes to be side by side. I have tried putting them all in a container and using float to no avail. I can see the text inside the 1st box and it goes down vertically. I need there to be 3 more boxes with text in them but aligned horizontally. Any help would be much appreciated. Below is the code in question. The HTML is first then the CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock Up</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div class="nav-wrapper">
        <nav class="navbar navbar-static-top">
            <!--Navbar-->
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                        <!-- Collapsing Hamburger Buttons for mobile -->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!--Menu Items-->
                <div class="collapse navbar-collapse navbar-right" id="mainNavBar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a href="#home">HOME</a>
                        </li>
                        <li class="nav-item">
                            <a href="#showroom">SHOWROOM</a>
                        </li>
                        <li class="nav-item">
                            <a href="#services">SERVICES</a>
                        </li>
                        <li  class="nav-item">
                        	<a href="#info">INFO</a>
                        </li>
                        <li class="nav-item">
                        	<a href="#photos">PHOTO GALLERY</a>
                        </li>
                        <li class="nav-item">
                        	<a href="#contact">CONTACT</a>
                        </li>
                    </ul>
                </div>
            </div>
    </div>
    <div class="wrapper">

        <img class="responsive-image" src="https://lh3.google.com/u/1/d/0B0DSNKIQ7ncnRDNNQUgwWk1tVXc=w1366-h653-iv1">
    </div>
    </nav>

    <div class="opaque-box"></div>
    <p class="box-content">NEW <br>INVENTORY</p></a>
    <div class="opaque-box"></div>
    <a href="#new-inventory"><p class="box-content">NEW <br>INVENTORY</p></a>
    <div class="opaque-box"></div>
    <a href="#new-inventory"><p class="box-content">NEW <br>INVENTORY</p></a>
    <div class="opaque-box"></div>
    <a href="#new-inventory"><p class="box-content">NEW <br>INVENTORY</p></a>




    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

.wrapper {
	position: relative;
	padding: 0 15px;
}

.responsive-image {
	width: 100%;
	height: auto;
}

#statement {
	position: absolute;
	text-align: center;
	top: 280px;
	left: 300px;
	font-size: 50px;
	font-weight: bold;
	color: #ffffff;
}

.opaque-box {
	z-index: 1;
	position: absolute;
	top: 670px;
	left: 15px;
	background: #000000;
	opacity: 0.4;
	width: 325px;
	height: 197px;
	border-top: solid 2px #ffffff;
	border-bottom: solid 2px #ffffff;
}

.box-content {
	text-align: center;
	z-index: 2;
	padding-top: 50px;
	color: red;
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	position: relative;
	top: -380px;
	left: -500px;
}

.nav-item > a {
	color: #000000;
	font-weight: bold;
}

.nav-wrapper {
  position:absolute;
  right: 0;
  left: 0;
}
2

arrange the order of your styles first, you don’t want bootsrap.css overwriting your own css

<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">

css:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row-eq-height > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.translucent > div {border: solid 2px #222; background: rgba(99,99,99,.5);}

html:

<div class="row row-eq-height translucent">
  <div class="col-xs-3"><a href="#">inventory 1</a></div>
  <div class="col-xs-3"><a href="#">inventory 2</a></div>
  <div class="col-xs-3"><a href="#">inventory 3</a></div>
  <div class="col-xs-3"><a href="#">inventory 4</a></div>
</div>

please validate your html (there are stray tags which can be confusing) and set a codepen or fiddle account so it’ll be easier for us to check

3

Hi guys,

I’m not the Admin of this post, but I was wondering if FFC was also covering Flexboxes? Because I’m now in the Javascript section and never heard of Flexbox in the course (I know that it’s exist tough).

Did I miss something?

4

There was some coverage of flexbox in the beta curiculum. Don’t know if it will be included in the new curriculum.

5

There is a beta curriculum? :smiley: ok thx

6

You have two options here - either use flexboxes as mentioned earlier or use bootstrap layout (with row and col-sm). As far as I can see, you need to get clear understanding of position relative and position absolute - that what was causing problems. Here is an example with bootstrap layout https://codepen.io/Helga108/pen/pWyVQZ (didn’t polish it to perfection, just brushed up your code a bit)

7

This works as far as getting the boxes to align. But they overflow outside of the image that they need to lay on top of when I resize the screen. Any suggestions? This is only my second time using Bootstrap so the layout for the page isn’t second nature to me yet so forgive my ignorance. Plus it was 1 AM when I was coding this haha.

8

This works as far as getting the boxes to align

my answer works as far as i can understand your question!
excuses will be dismissed! now repent and go make a pen/fiddle!
also, can you clarify this dude: :grimacing:

`But they overflow outside of the image that they need to lay on top of

9

Lol damn harsh. Well yeah they align and I fixed the overflow issue. I needed them to be black but transparent with white textbinside and all for aligned side by side. Thanks for your help thus far😄