Can you help me with the HTML below? I want the container to wrap around the section, content, and elements, and have element2 positioned directly next to element1.
<div class="page">
<div class="container">
<div class="section">
<div class="content">
<div class="element1">Elements Go Here And Here And Here And Here .. more elements hereafter</div>
</div>
</div>
<div class="section">
<div class="content">
<div class="element1">Elements Go Here And Here And Here And Here</div>
<div class="element2">more elements hereafter</div>
</div>
</div>
</div>
</div>
The CSS provided does not seem to work as intended. You can see the issue in this JSFiddle link:
.container {
width: 100%;
min-height: 74px;
height: auto;
border: 1px solid rgba(142, 142, 142, 1);
}
.section {
width: 100%;
min-height: 37px;
height: auto;
border: 1px solid rgba(142, 142, 142, 1);
background-color: blue;
}
.content {
float: left;
min-height: 37px;
height: auto;
width: 100%;
line-height: 1.42;
padding: 2%;
border: 1px solid rgba(142, 142, 142, 1);
}
.element1 {
float: left;
font-size: 12.9px;
padding-top: 2px;
letter-spacing: 0.07em;
background-color: green;
}
.element2 {
float: left;
padding-left: 3px;
background-color: purple;
}
.page {
width: 50%;
height: auto;
margin: 0 auto;
padding-top: 5%;
}