Create HTML & css view with fix Layout

Question

I'm trying to do this layout only with pure html/css as in the picture , but can't.

I've spent a lot of time on this and succeeded to do only with table elements. I'm trying to do so with basic DIVs /CSS

<html lang="en">
    <style>

        table, th, td {
            border: 1px solid black;
        }

        #upleft {
            width: 100px;
            height: 300px;
            background: red;
            float: left;
        }

        #upright {
            width: 300px;
            height: 200px;
            background: blue;
            float: left
        }

        #below {
            height: 300px;
            width: 400px;
            background: green
        }
    </style>
    <body>
    <p style="font-size: 1.5em;">&nbsp;</p>
    <p>&nbsp;&nbsp;</p>
    <table class="editorDemoTable" style="width: 581px; height: 101px;">
        <tbody>
        <tr style="height: 49px;">
            <td style="width: 619px; height: 49px;">
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </td>
            <td style="width: 423px; height: 49px;"><strong></strong></td>
        </tr>
        <tr style="height: 230px;">
            <td style="width: 19px; height: 230px;">
                <div id="target"></div>&nbsp;
            </td>
        </tr>
        </tbody>
    </table>
    <p></p>
    </body>
    </html>

Please suggest.

BR,

You can use flex or grid to do that or you need this to handle it in table? — Manjuboyz
– Manjuboyz, Commented Apr 13, 2020 at 8:11
i need use it without external libraries, only with pure html/css — VitalyT
– VitalyT, Commented Apr 13, 2020 at 8:15
@VitalyT as requested I have used basic table, let me know if that looks good. — Manjuboyz
– Manjuboyz, Commented Apr 13, 2020 at 8:25

Manjuboyz · Accepted Answer · 2020-04-13 09:32:36Z

1

Hope this works for you: you can play around with height and width as per your requirement.

.editorDemoTable {
  border: 1px solid black;
  width: 100%;
}

.firstRow .firstTD {
  border: 1px solid red;
  width: 25%;
  height: 200px;
}

.firstRow .secondTD {
  border: 1px solid red;
  width: 75%;
}

.secondRow .firstTD {
  border: 1px solid red;
  width: 25%;
  height: 500px;
}

.secondRow .secondTD {
  border: 1px solid red;
  width: 75%;
  height: 500px;
}

<table class="editorDemoTable">
  <tbody>
    <tr class="firstRow">
      <td class="firstTD">
        <input type="text" placeholder="search...">
      </td>
      <td class="secondTD"><strong></strong></td>
    </tr>
    <tr class="secondRow">
      <td class="firstTD">
        <div id="target"></div>&nbsp;
      </td>
      <td class="secondTD">lower right</td>
    </tr>
  </tbody>
</table>

Using Flex:

* {
  margin: 0;
  padding: 0;
  border: 0;
}

#MainDiv {
  display: flex;
  flex-direction: column;
  height: 900px;
  width: 100%;
  margin: 5px;
}

#txtsearch {
  margin-top: 10px;
  margin-left: 10px;
  border: 1px solid black;
  height: 30px;
  width: 60%;
}

.underline {
  margin-top: 10px;
  margin-left: 10px;
  height: 30px;
  width: 60%;
  font-weight: bold;
}

.Rows {
  display: flex;
  flex-direction: row;
}

.Topleft {
  height: 200px;
  width: 30%;
  border: 1px solid red;
}

.TopRight {
  height: 200px;
  width: 70%;
  border: 1px solid red;
}

.BottomLeft {
  height: 700px;
  width: 30%;
  border: 1px solid red;
}

.BottomRight {
  height: 700px;
  width: 70%;
  border: 1px solid red;
}

<div id="MainDiv">
  <div class="Rows">
    <div class="Topleft">
      <input type="text" id="txtsearch" placeholder="search...">
      <p class="underline">
        -------------------------------------
      </p>
    </div>
    <div class="TopRight">Top Right</div>
  </div>
  <div class="Rows">
    <div class="BottomLeft">Bottom Left</div>
    <div class="BottomRight">Bottom Right</div>
  </div>
</div>

edited Apr 13, 2020 at 9:32

answered Apr 13, 2020 at 8:24

Manjuboyz

7,1043 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

VitalyT Over a year ago

thanks, better use div elements , will check , but the search input text doesn't align with left upper side

Manjuboyz Over a year ago

you just have to move to the top, that is not an issue. I suggest use flex or grid, those are pure html/css properties it is easy to maintain. Since you asked in table so I did in that way.

VitalyT Over a year ago

Yep , sorry i just wrote that i can do it with table , will edit my question

Manjuboyz Over a year ago

Ok let me do something in flex and get back to you.

VitalyT Over a year ago

thanks ,man ,the search element should be input text with hr line below (as in the picture) white and black

|

Dostrelith · Accepted Answer · 2020-04-13 08:24:33Z

I suggest using CSS grid for layouts (both grid and flexbox are pure css), something like this: https://jsfiddle.net/7L6bpfn1/

HTML

<div id = "grid">

  <div id = "div1">
  1
    <div id = "search">
      Search
    </div>
  </div>
  <div id = "div2">
  2
  </div>
  <div id = "div3">
  3
  </div>
  <div id = "div4">
  4
  </div>

</div>

CSS

#grid {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 40vw 60vw;
  grid-template-rows: 30vh 70vh;
  grid-template-areas:
  "upper-left upper-right"
  "lower-left lower-right";
}

#div1 {
  grid-area: upper-left;
  background-color: red;
}
#div2 {
  grid-area: upper-right;
  background-color: red;
}
#div3 {
  grid-area: lower-left;
  background-color: red;
}
#div4 {
  grid-area: lower-right;
  background-color: red;
}
#search {
  background-color: blue;
  color: white;
  margin: 10px;
}

Hope it helps!

Collectives™ on Stack Overflow

Create HTML & css view with fix Layout

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related