CODEWITHSUNDEEP
htmlcss
Valdas S
Valdas S

Reputation: 455

CSS div elements alignment

I'm trying to align my div #black under the div #brown, but it goes under the div #grey. How can I solve this problem? This is how it looks now: https://s18.postimg.org/n0fywi4qv/image.png

    #cyan {
    height:100px;
    width: 100%;
    background-color: cyan;
    }
    
    #brown {
    height:200px;
    width:35%;
    float:left;
    background-color: brown;
    }
    
    #orange {
    height:400px;
    width:25%;
    background-color: orange;
    float: left;
    }
    
    #blue {
    height:400px;
    width:20%;
    background-color: blue;
    float: left;
    }
    
    #white {
    height:800px;
    width:20%;
    background-color: grey;
    float: left;
    }
    
    #black {
    height:200px;
    width:35%;
    background-color: black;
    float: left;
    }
   <!DOCTYPE html>
    <html>
    <head>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div id="cyan"></div>
    	<div id="brown"></div>
    	<div id="orange"></div>
    	<div id="blue"></div>
    	<div id="white"></div>
    	<div id="black"></div>
    </body>
    </html>

This is how it should look like: https://s21.postimg.org/3kyo9etqt/image.png

Upvotes: 2

Views: 66

Answers (3)

DaFois
DaFois

Reputation: 2223

Remove float and width property from #black and #brown rules

Wrap both in a #column-left container

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="cyan"></div>
    <div id="column-left">
        <div id="brown"></div>
        <div id="black"></div>
    </div>

    <div id="orange"></div>
    <div id="blue"></div>
    <div id="white"></div>

</body>
</html>

css

#column-left {
    width: 35%;
    float: left
}

#cyan {
    height: 100px;
    width: 100%;
    background-color: cyan;
}

#brown {
    height: 200px;
    background-color: brown;
}

#orange {
    height: 400px;
    width: 25%;
    background-color: orange;
    float: left;
}

#blue {
    height: 400px;
    width: 20%;
    background-color: blue;
    float: left;
}

#white {
    height: 800px;
    width: 20%;
    background-color: grey;
    float: left;
}

#black {
    height: 200px;
    background-color: black;
}

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You need to combine #brown and #black into .combined <div>

Have a look at the code below:

.combined {
  width: 35%;
  float: left;
}

#brown {
height:200px;
display: block;
background-color: brown;
}

#black {
height:200px;
background-color: black;
}


#cyan {
height:100px;
width: 100%;
background-color: cyan;
}

#orange {
height:400px;
width:25%;
background-color: orange;
float: left;
}

#blue {
height:400px;
width:20%;
background-color: blue;
float: left;
}

#white {
height:800px;
width:20%;
background-color: grey;
float: left;
}
<div id="cyan"></div>
<div class="combined">
  <div id="brown"></div>
  <div id="black"></div>
</div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>

Upvotes: 2

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

Or, you can wrap the elements in a container, that way it will work even if the size of the elements change (although you're using fixed sizes with px, which is not recommended)

#cyan {
    height:100px;
    width: 100%;
    background-color: cyan;
    }
    
    #brown {
    height:200px;
    width:100%;
    float:left;
    background-color: brown;
    }
    
    #orange {
    height:400px;
    width:25%;
    background-color: orange;
    float: left;
    }
    
    #blue {
    height:400px;
    width:20%;
    background-color: blue;
    float: left;
    }
    
    #white {
    height:800px;
    width:20%;
    background-color: grey;
    float: left;
    }
    
    #black {
    height:200px;
    width:100%;
    background-color: black;
    float: left;
    }
#brownblackcontainer {
  height: 400px;
  width: 35%;
  float: left;
  }
<!DOCTYPE html>
    <html>
    <head>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div id="cyan"></div>
      <div id="brownblackcontainer">
    	<div id="brown"></div>
                <div id="black"></div>
       </div>
      	<div id="orange"></div>
    	<div id="blue"></div>
    	<div id="white"></div>

    </body>
    </html>

Upvotes: 0

Related Questions