CODEWITHSUNDEEP
htmlcsspositioningresponsive
user2648117
user2648117

Reputation:

Div css layout positioning

I have been trying to get this layout for ages. All to no avail... I'm a backend programmer and I enjoy that part, but when it comes to css and positioning, I'm completely useless at it.

How do i get this? Number 3 is a textarea, and 1, 4 and 3 must be 100% width. Thanks for the help, and it would be much appreciated if someone could point me to a good css tut or something. enter image description here

Upvotes: 1

Views: 141

Answers (3)

Xavier
Xavier

Reputation: 130

I would look into CSS Grids. Just about any layout you want you could achieve using CSS Grids and it's not all that much to get a basic layout like this.

Here are some tutorials if you're interested:

https://www.youtube.com/watch?v=jV8B24rSN5o&t

https://www.youtube.com/watch?v=HgwCeNVPlo0

.header {
	grid-area: header;
	background: dodgerblue;
}

.sidenav {
	grid-area: sidenav;
	background: green;
}

.content {
	grid-area: content;
}

.text-area {
	grid-area: text-area;
	background: gray;
}

textarea {
	height: 100%;
}

.container-fluid {
  min-height: 500px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas:
	"header header"
	"sidenav content"
	"sidenav content"
	"sidenav text-area"
}
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="container-fluid">
	<div class="header">
		<h1>Header Area</h1>
	</div>
	<div class="sidenav">
		<h3>Sidenav</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi error quos sapiente at. Provident temporibus, voluptatum quos repellendus ullam id quidem tenetur sit. Assumenda error, ut cupiditate totam voluptas dolor odit pariatur accusantium iusto voluptatum libero quis non, qui minima.</p>
	</div>
	<div class="content">
		<h3>Content Area</h3>
	</div>
	<div class="text-area">
		<textarea placeholder="this is the text area" class="form-control"></textarea>
	</div>
</div>

This example uses bootstrap. If you don't want the whitespace on the sides, remove bootstrap and add some styling to remove it.

Upvotes: 1

thiirteen
thiirteen

Reputation: 103

Flexbox is your friend here, my friend. The mark-up and CSS would use a series of rules consisting of flex-grow and flex-direction. It would take a lot of typing to fill you in on all the mechanics, but Chris Coyier provides a really good set of documentation here.

    .node-1 { background: red; display: flex; flex-direction: column; height: 90vh; }
    .node-2 { background: blue; display: flex; flex-grow: 1; }
    .node-4 { background: green; display: flex; flex-direction: column; flex-grow: 1; }
    .node-4-content { flex-grow: 1; }
    .node-3 { background: yellow; }
<section class="node-1">
  <section class="node-1-content">
    node 1
  </section>
  <section class="node-2">
	<section class="node-2-content">
		node 2
	</section>
    <section class="node-4">
	  <section class="node-4-content">
	  	node 4
	  </section>
      <section class="node-3">
        <section class="node-3-content">
          node 3
        </section>
      </section>
    </section>
  </section>
</section>

Upvotes: 0

Jared Bledsoe
Jared Bledsoe

Reputation: 559

Applying width and height to each element, we can get the correct size and position.

html,body {
  width: 100%;
  height: 100%;
  margin: 0;

}
#one {
  width: 100%;
  height: 10%;
  background-color: blue;
}
#two {
  float: left;
  width: 10%;
  height: 90%;
  background-color: green;
}
#three {
  width: 100%;
  height: 80%;
  background-color: lightgrey;
}
#four {
  width: 100%;
  height: 10%;
  background-color: grey;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

Upvotes: 0

Related Questions