I'm having difficulty getting my uneven three-column website to fill the entire width of the viewport. Ideally, the left column would cover 25% of the width, the middle 50%, and the right 25%. If I'm unable to achieve that, then I would ask for the "unit" of all three columns to itself be centered in the viewport. Right now, all three columns are squished to the left. Portability of the final solution is extremely important to me: both in terms of browsers, as well as in terms of devices, so I don't want to set much as fixed width/height.
Screenshot of current problem
body {
background-color: white;
color: white;
padding: 0px;
}
header {
background-color: #616161;
text-align: center;
width: 100%;
position: static;
padding-bottom: 15px;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #0d47a1;;
height: 40px;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #5472d3;
color: black;
}
main {
background-color: #0d47a1;
margin-top: 15px;
margin-bottom: 15px;
padding: 15px;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
}
.row {
display: table;
margin-left: auto;
margin-right: auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
clear: both;
}
.column {
padding: 15px;
background-color: #373737;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin:15px;
float: left;
}
.left .right {
width: 25%;
}
/* Middle column */
.middle {
width: 50%;
}
.card {
height: 100px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
article {
background-color: #8e8e8e;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: white;
margin-top: 15px;
}
section {
background-color: #616161;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
footer {
background-color: #616161;
margin: auto;
text-align: center;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
/* unvisited link */
a:link {
color: #fcd734;
}
/* visited link */
a:visited {
color: #5472d3;
}
a:hover {
text-decoration: underline;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>DASK: Divorced and Separated Koinonia</h1>
<br text-decoration: italic>Turning the dusk of divorce into new dawn.</br>
</header>
<nav class="topnav">
</nav>
<main>
<div class="row">
<section class="column left">
<section>
<article class="card">
<h4>Profile</h4>
<p>Coming soon</p>
</article>
<article class="card">
<h4>Forum Posts</h4>
<p>Coming soon</p>
</article>
</section>
<section style="margin-top: 15px">
<h3>Events</h3>
<p>Coming soon</p>
</section>
</section>
<section class="column middle">
<section>
<h2>What is DASK?</h2>
<p>
DASK, or Divorced and Separated Koinonia, is a retreat designed by and for
people who have experienced divorce and separation. It is founded in the
Catholic religious tradition, but all are welcome. DASK is based on the popular
Koinonia retreat.
</p>
<h2>What is Koinonia?</h2>
<p>
Koinonia is retreat program that is popular nation-wide, but was first founded
in Springfield, IL for adults. The word "koinonia" itself comes from the Greek
word for "community". The Koinonia retreat is run by many parishes, dioceses,
and college campuses in order to form communities and friendships based in
Christ. DASK finds that the focus on community is helpful to people going
through divorce and/or separation; we find that it is easy to feel "alone"
going through this process.
</p>
<p>
The theme of every DASK weekend is the Paschal Mystery; that is, the life,
death, and resurrection of Jesus.
</p>
<h2>Where can I get more information?</h2>
<li>Download our brochure.</li>
<li>Like our Facebook page.</li>
<li>Email us at daskretreats#gmail.com.</li>
<li>Follow us on Twitter #daskretreats.</li>
<h2>How do I sign up?</h2>
<p>
Download our brochure, complete
the registration form inside, and submit it via snail mail or
email. We host two retreat weekends
a year: in the Spring at Columbia, IL, and in the Fall at Springfield, IL.
</p>
</section>
</section>
<section class="column right">
<section>
<h4>Donate</h4>
<p>Coming soon</p>
</section>
<section style="margin-top: 15px">
<article class="card">
<h4>Twitter</h4>
<p>Coming soon</p>
</article>
<article class="card">
<h4>News</h4>
<p>Coming soon</p>
</article>
</section>
</section>
</div>
</main>
<footer>
<p>
Copyright (C) 2018: Divorced and Separated Koinonia, under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a>.
<br>daskretreats#gmail.com
</p>
</footer>
</body>
</html>
Thanks in advance for your help!
See following code if you looking for it. I take few steps to achieve it. At first your selector was wrong like that .left .right, this is selecting right inside left it should .left, .right.
body {
background-color: white;
color: white;
padding: 0px;
}
/* Added */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header {
background-color: #616161;
text-align: center;
width: 100%;
position: static;
padding-bottom: 15px;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #0d47a1;;
height: 40px;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #5472d3;
color: black;
}
main {
background-color: #0d47a1;
margin-top: 15px;
margin-bottom: 15px;
padding: 15px;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
}
.row {
display: table;
margin-left: auto;
margin-right: auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
clear: both;
}
.column {
padding: 15px;
background-color: #373737;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin:15px;
float: left;
}
.left, .right {
width: calc(25% - 30px); // Deducted margin space 15+15 = 30px;
}
/* Middle column */
.middle {
width: calc(50% - 30px); // Deducted margin space 15+15 = 30px;
}
.card {
height: 100px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
article {
background-color: #8e8e8e;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: white;
margin-top: 15px;
}
section {
background-color: #616161;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
footer {
background-color: #616161;
margin: auto;
text-align: center;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
/* unvisited link */
a:link {
color: #fcd734;
}
/* visited link */
a:visited {
color: #5472d3;
}
a:hover {
text-decoration: underline;
}
<header>
<h1>DASK: Divorced and Separated Koinonia</h1>
<br text-decoration: italic>Turning the dusk of divorce into new dawn.</br>
</header>
<nav class="topnav">
</nav>
<main>
<div class="row">
<section class="column left">
<section>
<article class="card">
<h4>Profile</h4>
<p>Coming soon</p>
</article>
<article class="card">
<h4>Forum Posts</h4>
<p>Coming soon</p>
</article>
</section>
<section style="margin-top: 15px">
<h3>Events</h3>
<p>Coming soon</p>
</section>
</section>
<section class="column middle">
<section>
<h2>What is DASK?</h2>
<p>
DASK, or Divorced and Separated Koinonia, is a retreat designed by and for
people who have experienced divorce and separation. It is founded in the
Catholic religious tradition, but all are welcome. DASK is based on the popular
Koinonia retreat.
</p>
<h2>What is Koinonia?</h2>
<p>
Koinonia is retreat program that is popular nation-wide, but was first founded
in Springfield, IL for adults. The word "koinonia" itself comes from the Greek
word for "community". The Koinonia retreat is run by many parishes, dioceses,
and college campuses in order to form communities and friendships based in
Christ. DASK finds that the focus on community is helpful to people going
through divorce and/or separation; we find that it is easy to feel "alone"
going through this process.
</p>
<p>
The theme of every DASK weekend is the Paschal Mystery; that is, the life,
death, and resurrection of Jesus.
</p>
<h2>Where can I get more information?</h2>
<li>Download our brochure.</li>
<li>Like our Facebook page.</li>
<li>Email us at daskretreats#gmail.com.</li>
<li>Follow us on Twitter #daskretreats.</li>
<h2>How do I sign up?</h2>
<p>
Download our brochure, complete
the registration form inside, and submit it via snail mail or
email. We host two retreat weekends
a year: in the Spring at Columbia, IL, and in the Fall at Springfield, IL.
</p>
</section>
</section>
<section class="column right">
<section>
<h4>Donate</h4>
<p>Coming soon</p>
</section>
<section style="margin-top: 15px">
<article class="card">
<h4>Twitter</h4>
<p>Coming soon</p>
</article>
<article class="card">
<h4>News</h4>
<p>Coming soon</p>
</article>
</section>
</section>
</div>
</main>
<footer>
<p>
Copyright (C) 2018: Divorced and Separated Koinonia, under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a>.
<br>daskretreats#gmail.com
</p>
</footer>
what you can do it you can use bootstrap for giving your website a grid structure
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class='container'><!--This will span the viewport size-->
<div class='row'>
<!--start First column oneThird size-->
<div class='col-sm-4'>
content goes here......
</div>
<!--End First column oneThird size-->
<!--start second column oneThird size-->
<div class='col-sm-4'>
content goes here......
</div>
<!--End second column oneThird size-->
<!--start third column oneThird size-->
<div class='col-sm-4'>
content goes here......
</div>
<!--End third column oneThird size-->
</div>
</div>
</body>
Why are you using <section class="column left"> wherein css you have define only .left and .right.
Modify the following CSS elements of main.css. It should do the job.
.row {
display: flex;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.left .right {
width: 25%;
flex:1;
}
.column {
padding: 15px;
background-color: #373737;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin:15px;
}
/* Middle column */
.middle {
width: 50%;
flex:1;
}
Related
Hi am trying to do the below design how can i add the below shape and add a content to it?
I have looked for a solution in the internet but cant find one.
Please see my code below
.q{
background: #f5f5f5;
padding: 20px;
border-radius: 30px;
moz-border-radius: 30px;
webkit-border-radius: 30px;
margin-bottom: 5px;
cursor: pointer;
}
.q:hover{
font-size: 25px;
box-shadow: 10px 5px 24px -6px rgb(84 172 235 / 72%);
-webkit-box-shadow: 10px 5px 24px -6px rgb(84 172 235 / 72%);
-moz-box-shadow: 10px 5px 24px -6px rgba(84,172,235,0.72);
background: #3c98cb;
color: #ffffff;
}
.blue{
}
.contentp {
display: none;
}
.q:hover .contentp {
display: block;
}
<div class="q">
<div class="blue">
Is it simple and easy to use?
</div>
<div class="contentp">
Webex is designed with a clean User Interface and emphasis on simplicity, based on how users collaborate today. It is optimised for high-quality video and audio, for a smooth, fast experience.
</div>
</div>
Brand new html/css user here! I'm sure there's an easy and elegant way to solve this issue, but I haven't been able to find it.
I currently have four sections in my code, and the latter three seem to fall exactly how I would expect in relation to one another, one after the other, but the second one overlaps on top of the first one. I have gotten around this by adding an id to the second section that gives it some padding, but as you will notice, it is padding from the top of the page, not from the section above it. If I take that padding away, "About Me" overlaps on top of the background of the first section which contains the links.
#firstlink {
padding: 15px 50px 0px 0px
}
#linkbar {
background-color: blue;
height: 15%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
li {
font-size: 35px;
padding: 15px 10px 0px 0px;
float: right;
display: inline;
}
#aboutme {
padding: 75px 0px 0px 0px;
}
<section id="linkbar">
<ul>
<li id="firstlink">link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</section>
<section id="aboutme">
<h1>About Me</h1>
</section>
<section>
<h1>My Portfolio</h1>
</section>
<section>
<h1>Contact Me</h1>
</section>
Have a look on this fiddle, i think it is what you want - https://jsfiddle.net/swarn_singh/tv25eq3g/
#firstlink {
padding: 15px 50px 0px 0px
}
#linkbar {
background-color: blue;
height: 15%;
top: 0;
left: 0;
width: 100%;
}
li {
font-size: 35px;
padding: 15px 10px 0px 0px;
float: right;
display: inline;
}
.clear{
clear: both;
}
#firstlink {
padding: 15px 50px 0px 0px
}
#linkbar {
background-color: blue;
width: 100%;
height: 15%;
display: inline-block;
}
ul{
list-style-type:none;
padding: 0px;
margin: 0px;
float: right;
}
ul li {
font-size: 35px;
padding: 15px 10px 0px 0px;
display: inline-block;
}
#aboutme {
padding: 75px 0px 0px 0px;
}
<section id="linkbar">
<ul>
<li id="firstlink">link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</section>
<section id="aboutme">
<h1>About Me</h1>
</section>
<section>
<h1>My Portfolio</h1>
</section>
<section>
<h1>Contact Me</h1>
</section>
I have every other section floated a different direction but the sections that are floated right overlap the wrapper. How do I get it to not do that?
Also, I tried incorporating the float into the nth-child (odd/even) of the css and I couldn't get it to work right. If someone can help me do that so I can get rid of the float classes I would be grateful.
http://codepen.io/anon/pen/bdoQPQ
body,
html {
font: 1em "Open Sans", sans-serif;
margin: 0px;
padding: 0px;
}
#wrapper {
padding: 0px 10px 0px 10px;
width: 100%;
}
.vertSection {
width: 75%;
height: 175px;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 0px 0px 15px 0px;
padding: 5px 0px 0px 10px;
box-shadow: 0px 3px 5px #888, 0px -3px 5px #888;
display: inline-block;
}
.vertSection:nth-child(even) {
float: left;
}
.vertSection:nth-child(odd) {
float: right;
text-align: right;
}
.vertSection p {
text-align: left;
}
.vertSection img {
line-height: 75px;
}
.floatL {
float: left;
}
.floatR {
float: right;
}
.clear {
clear: both;
}
<section id="wrapper">
<section>
<h1>Header</h1>
<p>This is where some information on my services would go.</p>
</section>
<section class="vertSection">
<img src="images/html5css3.png" class="floatL">
<h2>Heading</h2>
<p>A bunch of text and description here!</p>
</section>
<section class="vertSection">
<img src="images/responsive.png" class="floatR">
<h2>Heading</h2>
<p>A bunch of text and description here!</p>
</section>
<section class="vertSection">
<img src="images/search.jpg" class="floatL">
<h2>Heading</h2>
<p>A bunch of text and description here!</p>
</section>
<section class="vertSection">
<img src="images/communicate.png" class="floatR">
<h2>Heading</h2>
<p>A bunch of text and description here!.</p>
</section>
</section class="">
The problem is likely related to this part.
#wrapper {
padding: 0px 10px 0px 10px; /*top right bottom left*/
width: 100%;
}
So 100% + 10px + 10px causes the overflow, remove width:100% it should all good. By the way, it's safer to also set section {display:block;} in case some browsers don't render it as block level element.
I've got a basic layout that is a div with a thumbnail, floated left, then a div with some text in it (title, description, links) that floats lefts as well. They're meant to be side-by-side but as soon as the browser is too narrow, it pushes the 2nd div below the first, rather than just decreasing its width.
I can't believe I'm stumped on this as it seems really simple. I'd really appreciate some help!
html
<div class="stunting-video odd">
<div class="thumbnail">
<img src="https://i.ytimg.com/vi/LixKwLQiSGU/mqdefault.jpg" data-video-id="LixKwLQiSGU" class="show-video" alt="stunting video">
</div>
<div class="info">
<p class="title">GTA V - Stunt practise 03</p>
<p class="description">A play-through of a race created to practise a motorbike stunt in GTA V where you can jump from the docks to near the airport. Race is available here...<br>
<br>
<span class="highlight">PS3:</span> http://rsg.ms/0330f82<br>
<span class="highlight">Xbox360:</span> http://rsg.ms/4464ca5<br>
<br>
Special credits to Cheddar for the 360 version.</p>
</div>
</div>
css
body {
background-color: rgb(20, 20, 20);
color: rgb(238, 238, 221);
font-family: sans-serif;
font-size: 16px;
font-weight: 300;
margin: 20px;
}
a {
color: rgb(111, 178, 244);
}
.stunting-video {
background-color: rgba(255, 255, 255, 0.125);
border-radius: 30px;
box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.3) inset, -5px -5px 10px rgba(0, 0, 0, 0.9) inset;
clear: both;
margin: 10px 0;
overflow: auto;
padding: 5px 15px 15px;
}
.stunting-video .thumbnail {
border: 0;
cursor: pointer;
float: left;
margin: 10px 20px 0 0;
padding: 0;
}
.stunting-video .thumbnail img {
border-radius: 15px 0 0 15px;
}
.stunting-video .info {
float: left;
}
.stunting-video .title {
color: rgb(245, 215, 122);
font-size: 150%;
font-weight: bold;
}
.stunting-video p {
margin: 5px 0;
}
js fiddle example of the above
http://jsfiddle.net/yp7f0nz1/
All that is required is to not float the info div and (based on other comments) add adequate padding=left so that the text does not wrap around the thumbnail.
.stunting-video .info {
padding-left: 350px;;
}
Jsfiddle Demo
EDIT
I was reminded that a table would do this automatically and. of course, we have display:table / table-cell open to us.
Removing the floats and using
.stunting-video {
display: table;
}
and
.stunting-video .thumbnail {
display: table-cell;
vertical-align: top;
}
.stunting-video .info {
display: table-cell;
vertical-align: top;
}
JSfiddle Demo 2
I am using html5 and css3 in my site project.
My css
.featured-posts{
display: block;
overflow: hidden;
margin-left: -10px;
margin-bottom: 0px;
width: 960px;
}
.featured-posts li{
display: block;
float: left;
position: relative;
width: 300px;
margin: 10px;
}
.featured-posts li .thumb{
display: block;
width: 300px;
margin-bottom: 0px;
line-height: 0em;
background: #f1f1f1 url(../img/plus.png) no-repeat center center ;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
box-shadow: 0px 0px 2px rgba(0,0,0,.3);
}
.featured-posts li .thumb img{
margin: 5px;
}
.featured-posts li .thumb span:hover img{
opacity: 0.4;
}
.featured-posts .link-button{
opacity: 0;
}
.featured-posts li:hover .link-button{
opacity: 1;
}
.featured-posts li .link-button:hover{
background: #f1f1f1;
padding: 2px 8px;
-webkit-box-shadow: 0px 2px 0px rgba(56, 7, 7, 1);
-moz-box-shadow: 0px 2px 0px rgba(56, 7, 7, 1);
box-shadow: 0px 1px 0px rgba(0, 0, 0, .2);
}
.featured-posts .excerpt-arrow{
position: absolute;
top: -10px;
left: 20px;
background: url(../img/excerpt-arrow.png) no-repeat top left;
}
.featured-posts .excerpt{
position: relative;
padding: 15px 15px 0px 15px;
margin-bottom: 0px;
}
.featured-posts .excerpt .heading {
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
}
#content-wrap .featured-posts .excerpt .heading a{
text-decoration: none;
color: #606060;
}
#content-wrap .featured-posts .excerpt .heading a:hover{
color: #000000;
}
my html code-
<ul class="featured-posts">
<li>
<img src="img/Web.png" alt="Post" />
<div class="excerpt">
<div class="heading">Web Design</div>
<p>MCS PMS is a comprehensive Front Desk Reservation/Check-In solution package that is EPABX compliant and integrates well advance with other M Cubic modules like POS & Housekeeping Department.</p><br />
<br />
Read More,..
</div>
</li>
<li>
<img src="img/Logo.png" alt="Post" />
<div class="excerpt">
<div class="heading">Logo Design</div>
<p>We provide unbelievable, unique logo-design to brand your representation and identity. We offer several designs.</p><br />
<br /><br /><br />
Read More,..
</div>
</li>
<li>
<img src="img/Broucher.png" alt="Post" />
<div class="excerpt">
<div class="heading">Brochure Design</div>
<p>We are ready to produce a fantastic piece of printing design, which really reflects the goals and promotional aims of your business.</p><br />
<br /><br />
Read More,..
</div>
</li>
</ul>
<div class="clear"></div>
Different links that use the same link text may be confusing: See
matching tag(s)
on line(s
this Error comes on each read more anchor tag while testing total Validator tool.
what is the mistake in
Read More,..
I dont think you've made a mistake. Your code looks correct.
The validator you are using is most likely reporting a "warning" because for accessability reasons the link text being the same could cause confusion to some users.
If you are really concerned with these errors try using
Read More about logo designing..
instead of
Read More,..
This will make your button design a challenge but will stop the warnings.
OR
Understand that is is a warning - not an arror.