w3-half fill out background-color

rj1102 · February 5, 2016

I could not find a seperate W3.CSS forum, so I've posted my question here.

See html output below:

Using w3-half, how can I achieve that the white space under the green div is also filled with green (or the silver div filled out with silver if this div happens to be the shortest, the text is dynamic)?

Code:

</div>

<p>[w3-half] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

<p>[w3-half] Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</div>

dsonesuk · February 5, 2016

<!DOCTYPE html>

<html>

<style>

.bg-setting .w3-half{position: relative;}

.bg-setting .w3-row {overflow: hidden;}

.bg-setting .w3-half:before {content: ""; position: absolute; top: -50%; left:0; height: 500%; right:0; z-index: -1;}

.yellow {background-color: yellow;}

.bg-setting .w3-half.silver:before {background-color: silver;}

.bg-setting .w3-half.green:before {background-color: green;}

</style>

</head>

<body>

</div>

<p>[w3-half] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

<p>[w3-half] Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</div>

</body>

</html>

Edited February 5, 2016 by dsonesuk

Sign In

w3-half fill out background-color

Recommended Posts

rj1102

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity