CODEWITHSUNDEEP
htmlcsslayout
VitalyT
VitalyT

Reputation: 1691

Create HTML & css view with fix Layout

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,

Upvotes: 1

Views: 175

Answers (2)

Manjuboyz
Manjuboyz

Reputation: 7066

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>

Upvotes: 1

Dostrelith
Dostrelith

Reputation: 962

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!

Upvotes: 0

Related Questions