• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Using flex box to make a grid

ryanforprez

New Coder
Hello I have used flex box before without problems, but with this new code I am using to show a hover when over text I am not sure how to make my body content and body content 1 to be in 2 rows at the top, instead of stacked on each other
CSS:
.bodycontent {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 1%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 33%;
    padding-bottom: 3px;
    flex; 1;
    
}

.bodycontent1 {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 50%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 33%;
    padding-bottom: 3px;
    flex: 2;
    z-index: 9;
}

.images{
    width: 33%;
    z-index: -9;
    padding-left: 10px;
}
HTML:
 <div class="bodycontent">
       <a href="index.html" id = "ryan" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Look At This Photograph</p></a>
        </div>
    <div class="bodycontent">
       <a href="index.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>1017 A L Y X 9SM</p></a>
        </div>
    <div class="bodycontent">
        <a href="index.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Tendencies</p></a>
    </div>
    
    <div class="bodycontent">
        <a href="index.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Bean Sans</p></a>
    </div>   
        
    <div class="bodycontent1">
        <a href="index.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Canyon Daze</p></a>
    </div>
        
                
    <div class="bodycontent1">
        <a href="index.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Mutiny</p></a>
    </div>
    
    <div class="bodycontent1">
        <a href="index.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Pill Poppers</p></a>
    </div>
        

        
    <div class="images">
                <img id="look" class="lookat" src="Images/lookat-this2.gif">
      
                <img id="alyx" class="alyx" src="Images/thumbalyx.png">
        
                <img id="tend" class="tend" src="Images/thumbtend.png">
        
                <img id="bean" class="bean" src="Images/thumbbean.png">
                
                <img id="daze" class="daze" src="Images/thumbdaze.png">
                
                <img id="mutiny" class="mutiny" src="Images/Mutiny_Ring.png">
        
                <img id="pill" class="pill" src="Images/thumbpp.png">
        
                
        </div>
    
    <script>
    
        function mouseOver() {
  document.getElementById("look").style.display = "block";
}

        function mouseOut() {
  document.getElementById("look").style.display = "none";
}

        function mouseOver1() {
  document.getElementById("alyx").style.display = "block";
}

        function mouseOut1() {
  document.getElementById("alyx").style.display = "none";
}

        function mouseOver2() {
  document.getElementById("tend").style.display = "block";
}

        function mouseOut2() {
  document.getElementById("tend").style.display = "none";
}
    
        function mouseOver3() {
  document.getElementById("bean").style.display = "block";
}

        function mouseOut3() {
  document.getElementById("bean").style.display = "none";
}
    
        function mouseOver4() {
  document.getElementById("daze").style.display = "block";
}

        function mouseOut4() {
  document.getElementById("daze").style.display = "none";
}
        function mouseOver5() {
  document.getElementById("mutiny").style.display = "block";
}

        function mouseOut5() {
  document.getElementById("mutiny").style.display = "none";
}       
      
        function mouseOver6() {
  document.getElementById("pill").style.display = "block";
}

        function mouseOut6() {
  document.getElementById("pill").style.display = "none";
}       
\       
    </script>
 

ryanforprez

New Coder
If I put change it so they are not all broken up by divs and just in 2 div classes, I still get the same thing
HTML:
<div class="firstcol">
       <div>
       <a href="index.html" id = "ryan" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Look At This Photograph<br></p></a>

       <a href="index.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>1017 A L Y X 9SM<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Tendencies<br></p></a>
 
        <a href="index.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Bean Sans<br></p></a>
       </div>
    </div>
    <div class="secondcol">
       <div>
        <a href="index.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Canyon Daze<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Mutiny<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Pill Poppers</p></a>
           </div>
    </div>
CSS:
.firstcol {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 1%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 33%;
    padding-bottom: 3px;
    flex: 0, 50%;
    
    
}

.secondcol {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 50%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 33%;
    padding-bottom: 3px;
    flex: 0, 50%;

}
 

darioK

New Coder
Is this what you wanted?

HTML:
<div class="firstcol">

       <a href="index.html" id = "ryan" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Look At This Photograph<br></p></a>

       <a href="index.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>1017 A L Y X 9SM<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Tendencies<br></p></a>
 
        <a href="index.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Bean Sans<br></p></a>

    </div>
    <div class="secondcol">
        <a href="index.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Canyon Daze<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Mutiny<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Pill Poppers</p></a>
 
    </div>
CSS:
.firstcol {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 1%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 100%;
    padding-bottom: 3px;
    flex: 0, 50%;
}

.firstcol a {
  margin: 5px;
}

.secondcol {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 50%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 100%;
    padding-bottom: 3px;
    flex: 0, 50%;
}

.secondcol a{
  margin: 5px;
}
 
Top Bottom