For the text, when I scroll down, the text goes under the sticky navbar.
But for image, when I scroll down, the image is in front of the sticky navbar.
I've tried to look on the internet, but I can't find the one within amp-html.
Here is the code I get from the internet
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>TEST STICKY NAVBAR</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="http://www.indonesiangems.com">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
font-size: 17px;
}
a {text-decoration: none;}
.container{
max-width: 800px;
margin: auto;
}
p,h3{
margin:auto;
padding : 10px;
text-align: justify;
}
.center {
text-align: center;
font-style: italic;
}
.footer {
background-color: black;
text-align: center;
margin: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 14px;
}
div.scrollmenu a:hover {
background-color: #777;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="sticky">
<amp-img src="https://dummyimage.com/1200x400/000/fff"
width="1200" height="400" layout="responsive"></amp-img>
<div align="center">
<div class="scrollmenu">
bla bla bla
blublublublu
belbelbelbe
blobloblboblo
blibliblibli
</div>
</div>
</div>
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc </p>
<div class="center">
<amp-img src="https://dummyimage.com/320x260/22d91c/fff"
width="320" height="260" layout="responsive"></amp-img><br>
Variety of Indonesian gemstones
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec </p>
</div>
</body>
</html>
Thank you.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
Just add the z-index property in your image.
Add this to your CSS file.
.center amp-img
{
z-index: -1;
}
I'm not sure how essential it is for that image to have an tag, but a quick fix is to turn the tag to a regular tag like I did below.
<img src="https://dummyimage.com/320x260/22d91c/fff"
width="320" height="260" max-width="320"></img><br>
Related
I would like to overlay a part of a text over an image with HTML CSS in order to obtain something like this.
But the best I manage to obtain is this :
How I can move the text a little bit to the left ?
Below my code :
Any tips on how to do this ?
Thank you very much !
This should work.
body {
background-image: url("https://i.stack.imgur.com/B9jjg.png");
background-repeat: repeat-y;
background-color: #fff;
background-size: 100%;
font-family: sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
h1 {
font-size: 42px;
color: #00ae82;
}
p {
font-size: 21px;
color: black;
line-height: 32px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="container">
<h1>
Lorem ipsum
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ligula ac tempor lacinia, sem ligula rutrum lacus, nec maximus sem augue eu neque. Integer aliquet ligula nunc, vel pellentesque elit condimentum vel. Sed fermentum dolor ex, vitae porta mi venenatis ac. Praesent imperdiet rhoncus fermentum. Vivamus ac dui euismod, convallis erat sed, cursus diam. Fusce vitae justo ornare, placerat elit quis, ornare tellus. Vivamus iaculis lorem in efficitur imperdiet. Proin quis dolor tincidunt, maximus ante vel, ullamcorper leo. Sed urna turpis, dictum vitae accumsan non, suscipit sed lorem. Ut molestie ac lectus id ornare. Nunc id est libero. Vivamus euismod erat vel pharetra pharetra. Donec pulvinar eleifend lorem scelerisque commodo. Nam nibh augue, vulputate vitae dolor et, dapibus mollis dolor.
</p>
</div>
</body>
</html>
I am having problems with the two sections i'm making. i want to make a notification section but my 3 articles are not how i want them to be. how do i make it so that the three articles and the aside are on the same line without overflowing?
problem
I just want them in a straight line like these
Example
h1{
margin-top: 80px;
}
article {
background-color: beige;
margin-bottom: 1em;
min-height: 300px;
}
article.text{
color: black;
background: white;
min-height: 300px;
}
article, h2{
padding-top: 1em;
}
main{
column-count: 3;
column-gap: 20px;
margin-top: 1em;
}
<main>
<h1>Welkom op Het bedrijf</h1>
<section>
<article>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.
</p>
</article>
<aside>
<article class="text">
<h2>Whats new?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in volutpat est.
</p>
</article>
</aside>
</main>
Actually from your explanation and images I gather that you want to split your page into two different areas:
a multi column story container
a single column notification area
As opposed to the current three column main container you have now.
Without using Flexbox and CSS-grid I created a snippet with what I understand you want. I added some extra articles and background-colors to show the structure and commented the CSS where applicable...
Bonus: added some 'responsive' behaviour using both math and #media queries.
/* Generally accepted preferred rules */
html,body { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, * { box-sizing: inherit }
/* remove some default HTML spacing (when required, use padding instead) */
body,h1,h2,h3,h4,h5,h6,p { margin: 0 }
/* define page structure */
.main { height: 100%; width: 100% } /* avoid using <main> */
/* mobile first, 1 column */
section { max-width: 67%; float: left; column-count: 1; column-gap: 1.25rem }
aside { max-width: calc(33% - 1.25rem); float: right } /* minus column-gap */
article { break-inside: avoid } /* keeps content in the same column */
/* some responsiveness */
#media (min-width: 961px) { section { column-count: 2 } }
#media (min-width: 1281px) { section { column-count: 3 } }
/*
responsive page padding (linear equation y = mx + b)
p1(320,32) p2(1920, 72) => 0.025x + 24
p3(320, 8) p4(1920,320) => 0.195x - 54.4
grow from 32px on a 320px viewport to 72px on a 1920px viewport
grow from 8px on a 320px viewport to 320px on a 1920px viewport
*/
.padded {
padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px)
}
/* eye-candy only */
header {
column-span: all; /* span full container */
padding: 1.25rem; /* equal to column-gap */
background-color: Black; Color: White;
}
h1 { line-height: 1.25rem }
h2,p { padding-bottom: .5em }
section>article { background-color: Beige }
aside>article { background-color: rgba(0,0,0,.1); color: Black }
article {
padding: 1.25rem; /* equal to column-gap */
margin-bottom: 0.5rem /* space between articles */
}
[outlines="1"] * { outline: 1px dotted }
<div class="main padded" outlines="0">
<section>
<header>
<h1>Welkom op Het bedrijf</h1>
</header>
<article>
<h2>Story 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
<article>
<h2>Story 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
<article>
<h2>Story 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
<article>
<h2>Story 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
<article>
<h2>Story 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
</section>
<aside>
<header>
<h1>What's new?</h1>
</header>
<article>
<h2>What's new 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
volutpat est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
volutpat est.</p>
</article>
<article>
<h2>What's new 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
volutpat est.</p>
</article>
<article>
<h2>What's new 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
volutpat est.</p>
</article>
</aside>
</div>
If I am understanding correctly, the aside is the notifications area, while the main content is to the left. I would use CSS Grid for this.
CSS:
.container {
display: grid;
grid-template-columns: repeat(2, 2fr) 1fr;
grid-gap: 2rem;
}
article {
background-color: beige;
margin-bottom: 1em;
min-height: 300px;
}
aside.notifications {
background-color: #171717;
color: #f5f5f5;
}
aside, article {
padding: 1rem;
}
HTML:
<main>
<h1>Welkom op Het bedrijf</h1>
<section class="container">
<article>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.
</p>
</article>
<aside class="notifications">
<h2>Whats new?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in volutpat est.
</p>
</aside>
</section>
</main>
I'm trying to get tooltips working properly within a scrollable div container. To achieve this I've set the tooltips position to absolute and for its parent element (.panel-section) to relative. Problem is with the very first tooltip which should be visible on top of the .panel-header but now it's going "under" it and is not visible.
.panel {
margin: 50px;
width: 500px;
border: 1px solid black;
}
.panel-header {
height: 2rem;
background-color: silver;
border-bottom: 1px solid black;
}
.panel-content {
overflow-y: auto;
height: 500px;
}
.panel-section {
position: relative;
}
h1,
h2 {
margin: 0;
}
.tooltip {
width: 200px;
height: 50px;
border: 1px solid silver;
background-color: #333333ee;
color: silver;
position: absolute;
top: -50px;
display: none;
}
.panel-section:hover .tooltip {
display: block;
}
<html>
<body>
<div class="panel">
<div class="panel-header">
<h1>Header content</h1>
</div>
<div class="panel-content">
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
</div>
</div>
</body>
</html>
I have something to ask about html css
I have layout that I want to achieve like picture 1 below
But, if it zoomed in several percentage, it becomes like picture 2 below
what I want is, it stable like picture 1 in any zoom
Here is the code
body {
background-color: #430600;
width: 1280px;
margin: 0 auto;
align-content: center;
padding: 0;
}
header {
position: fixed;
width: 100%;
z-index: 15;
}
main {
float: left;
margin-top: 120px;
}
h1 {
color: white;
text-align: center;
font-style: italic;
z-index: 10;
}
h2 {
color: white;
text-align: center;
}
#section-banner {
}
#section-banner h2 {
position: absolute;
text-align: center;
top: 300px;
left: 0;
width: 100%;
transform: translateY(-50%);
color: white;
font-size: 5em;
font-style: italic;
z-index: 1;
}
#section-aboutus-1 {
color: white;
margin-top: 50px;
text-align: center;
}
#aboutus-1 {
float:left;
}
#aboutus-table {
float:left;
}
#aboutus-image-1 {
float:left;
width: 50%;
}
#aboutus-detail-1 {
float: right;
width: 45%;
text-align: center;
font-size: 1.4em;
margin: 50px 20px 50px 20px;
display: inline-block;
}
#aboutus-detail-2 {
float:left;
width: 45%;
text-align: center;
font-size: 1.4em;
margin: 75px 20px 50px 20px;
display: inline-block;
}
#aboutus-image-2 {
float:right;
width: 49%;
}
#aboutus-detail-3 {
margin: 50px 150px 50px 150px;
float:left;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='index.css?ver=1.0' media='all' />
</head>
<body>
<section id="section-aboutus-1">
<div id="aboutus-image-1">
<img src="https://i.stack.imgur.com/jDg7r.jpg" alt="" />
</div>
<div id="aboutus-detail-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
<br><br>
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
<br><br>
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
<br><br>
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.
</div>
<div id="aboutus-detail-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
<br><br>
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
<br><br>
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
<br><br>
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.
</div>
<div id="aboutus-image-2">
<img class="image" src="https://i.stack.imgur.com/6EScx.jpg" alt="" />
</div>
<div id="aboutus-detail-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
<br><br>
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
<br><br>
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
<br><br>
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.
</div>
</section>
</body>
</html>
Any help appreciated
First, you should improve this HTML code, separating block.
You should put #aboutus-detail-1 and #aboutus-image-1 in a separeted div and in CSS you say:
float: left;
width: 100%;
for those two new divs.
The same for the others #aboutus
would you be interested in using a responsive framework like bootstrap?
https://jsfiddle.net/audetcameron/ggdz2Lnj/ just a quick example
<body style="background:#430600; color:#ffffff">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div id="aboutus-image-1">
<img src="https://i.stack.imgur.com/jDg7r.jpg" alt="" class="img-responsive"/>
</div>
</div>
<div class="col-xs-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.</p>
</div>
<div class="col-xs-6">
<div id="aboutus-image-2">
<img class="image" src="https://i.stack.imgur.com/6EScx.jpg" alt="" class="img-responsive"/>
</div>
</div>
</div>
</div>
</body>
While trying to create a div 'ed structure I am having difficulty on covering a background color.
in the example below the wrap div is not covering other layers.
There is something I am missing in the css but cannot figure out what is the problem :(
Any help would be great :)
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: Arial;
}
html {
height: 100%;
}
body {
background: #688420;
height: 100%;
font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
#column {
position: relative;
width: 950px;
margin: auto;
}
#wrap {
background-color:#FF0;
}
.wrapleft {
background-color: #039;
text-align: left;
float:left;
width:60%;
}
.wrapright {
background-color:#3F9;
text-align:left;
float:left;
width: 35%;
}
.seperator {
width:5%;
background-color:#9CC;
float:left;
}
.space {
width:100%;
height:20px;
clear:both;
}
#wrapContent {
background-color: #C3F;
}
</style>
</head>
<body>
<div id="main">
<div id="column">
<div id="wrapContent">
<div id="wrap">
<div class="space"> </div>
<div class="wrapleft">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div><!-- wrapleft -->
<div class="seperator"> </div>
<div class="wrapright">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div> <!-- wrapright -->
<div class="space"> </div>
<div class="wrapleft">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div><!-- wrapleft -->
<div class="seperator"> </div>
<div class="wrapright">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div> <!-- wrapright -->
</div><!-- wrap -->
</div> <!-- column -->
</div> <!-- main -->
</body>
</html>
You have to clear your floats:
#wrap {
background-color:#FF0;
overflow: hidden;
}