Problem to diagram Divs

Asked

Viewed 61 times

0

Problem to diagram Divs favorite I need to go as green and pink Ivs under the dark and light blue, leaving a larger div next to all of them, but I don’t know how to work this in CSS. Someone can help me?

Below my html and css codes:

#forma{
  width:960px;
  height:930px;
  background-color:#000;    
  margin:auto;
  align:center;
}
#nav1{
    width: 480px;
    height: 30px;
    background-color:#DFF034;
    float: left;
}
#nav2{
    width: 480px;
    height: 30px;
    background-color:#50E53F;
    float: left;
}
#banner{
    width: 960px;
    height: 300px;
    background-color: #3028E9;
}
#body1{
    width: 320px;
    height: 300px;
    background-color: #2DD58A;
    float: left;
}
#body2{
    width: 320px;
    height: 300px;
    background-color: #020635;
    float: left;
}
#body3{
    width: 320px;
    height: 300px;
    background-color: #1A6AE5;
    float: left;
}
#corner{
    width: 320px;
    height: 300px;
    background-color: #000000;
    float: left;
    display: inline;
}
#incorner1{
    width: 160px;
    height: 150px;
    background-color: #050421;
    float: left;
}
#incorner2{
    width: 160px;
    height: 150px;
    background-color:#B4C5CD;
    float: left;
}
#incorner3{
    width: 160px;
    height: 150px;
    background-color: #37CB44;
    float: left;
}
#incorner4{
    width: 160px;
    height: 150px;
    background-color: #DC8082;
    float: left;
}
#bigcorner{
    width: 640px;
    height: 300px;
    background-color: #AC8329;
    float: right;
    display: inline;
}
<html>
<head>
<meta charset="utf-8">
<title>layout2</title>
<link style="text/css" href="css/estilo2.css"
rel="stylesheet"/>
</head>

<body>
<div id="forma">
    <div id="nav1"></div>
    <div id="nav2"></div>
    <div id="banner"></div>
    <div id="body1"></div>
    <div id="body2"></div>
    <div id="body3"></div>
    <div corner>
        <div id="incorner1"></div>
        <div id="incorner2"></div>
        <div id="incorner3"></div>
        <div id="incorner4"></div>
    </div>
    <div id="bigcorner"></div>
</div>
</body>
</html>

html css

  • I could explain it better. I don’t understand.

  • I have a square div corner where I put four square Ivs inside. And on the side I want to put a rectangular div. But the incorner four are getting aligned and pushing the bigcorner rectangle down. I wanted two up and two down in the form, but I’m not getting it.

1 answer

0

Failed to name id="Conner"

From what I’ve analyzed, you’ve already made the flotation you need.

I just forgot to name the id="Conner"

Tips

A piece of advice for you to work better and be able to reuse your structure is to use class="class" . class instead of id in its structure. id is only used when it is unique elements such as forms or in some element that needs to have its unique identification. Using class you can reuse your structure without too many problems and will be happier.

Grid

Something that can help you improve your projects is also using some grid framework or even creating your own.

Bootstrap has a great grid system, I advise the study.

http://getbootstrap.com/css/#grid

This article would also help you better understand how a simple grid works.

https://tableless.com.br/entendendo-sistemas-de-grid-css-do-zero/

I hope I have been able to help, any doubt comments there.

#forma{
  width:960px;
  height:930px;
  background-color:#000;    
  margin:auto;
  align:center;
}
#nav1{
    width: 480px;
    height: 30px;
    background-color:#DFF034;
    float: left;
}
#nav2{
    width: 480px;
    height: 30px;
    background-color:#50E53F;
    float: left;
}
#banner{
    width: 960px;
    height: 300px;
    background-color: #3028E9;
}
#body1{
    width: 320px;
    height: 300px;
    background-color: #2DD58A;
    float: left;
}
#body2{
    width: 320px;
    height: 300px;
    background-color: #020635;
    float: left;
}
#body3{
    width: 320px;
    height: 300px;
    background-color: #1A6AE5;
    float: left;
}
#corner{
    width: 320px;
    height: 300px;
    background-color: #000000;
    float: left;
    display: inline;
}
#incorner1{
    width: 160px;
    height: 150px;
    background-color: #050421;
    float: left;
}
#incorner2{
    width: 160px;
    height: 150px;
    background-color:#B4C5CD;
    float: left;        
}
#incorner3{
    width: 160px;
    height: 150px;
    background-color: #37CB44;
    float: left;
}
#incorner4{
    width: 160px;
    height: 150px;
    background-color: #DC8082;
    float: left;
}
#bigcorner{
    width: 640px;
    height: 300px;
    background-color: #AC8329;
    float: right;
    display: inline;
}
<html>
<head>
<meta charset="utf-8">
<title>layout2</title>
<link style="text/css" href="css/estilo2.css"
rel="stylesheet"/>
</head>

<body>
<div id="forma">
    <div id="nav1"></div>
    <div id="nav2"></div>
    <div id="banner"></div>
    <div id="body1"></div>
    <div id="body2"></div>
    <div id="body3"></div>
    <div id="corner">
        <div id="incorner1"></div>
        <div id="incorner2"></div>
        <div id="incorner3"></div>
        <div id="incorner4"></div>
    </div>
    <div id="bigcorner"></div>
</div>
</body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.