/    Sign up×
Community /Pin to ProfileBookmark

Arranging elements with CSS

Copy linkTweet thisAlerts:
Apr 16.2019

Hi
I need to arrange 3 <div> elements as shown in the attached image using css. Arranging 2 elements side by side is easy, e.g.:
#content01 {
float: left ;
width: 30% ;
}
#content02 {
float: left;
width: 70%;
}
Can somebody help me with the case of 3 elements?
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-04-16/1555416624-296175-capture.png]

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERApr 16.2019 — For your consideration:
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/&gt;
&lt;title&gt; HTML5 Test Page &lt;/title&gt;
&lt;!-- From: https://www.webdeveloper.com/d/384395-arranging-elements-with-css --&gt;

&lt;style&gt;
/* body {margin: 4px } /* optional */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.box { border: 1px solid black; }
.item1 { width: 30%; height: 100vh; float: left; }
.item2, .item3 { width: 70%; height: 50vh; float: left; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
&lt;div class="box item1"&gt;Element 1&lt;/div&gt;
&lt;div class="box item2"&gt;Element 2&lt;/div&gt;
&lt;div class="box item3"&gt;Element 3&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy linkTweet thisAlerts:
@JMRKERApr 17.2019 — Alternative using Grid instead of Float
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; 1x2 Grid Display &lt;/title&gt;
&lt;!-- Modified from: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named --&gt;

&lt;style&gt;
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.item2 { grid-area: menu; height: 100vh; }
.item3 { grid-area: left; height: 50vh; }
.item4 { grid-area: right; height: 50vh; }
.grid-container {
display: grid;
grid-template-areas:
'menu left left'
'menu right right';
grid-gap: 1px;
background-color: #2196F3;
padding: 1px;
}
.grid-container &gt; div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 1px 0;
font-size: 30px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Grid Layout&lt;/h1&gt;

&lt;div class="grid-container"&gt;
&lt;div class="item2"&gt;Full Left&lt;/div&gt;
&lt;div class="item3"&gt;Top Right&lt;/div&gt; <br/>
&lt;div class="item4"&gt;Bottom Right&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @ldor108 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...