I'm writing a website for a restaurant (Not commercially) and need to know why there's so much whitespace to the right side of the page? Take a look
.top-container{
background-color: white;
background-image: url("images/charmlogoTrans.png");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size:contain;
position: relative;
max-width: 100%;
}
.menuBar{
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
z-index: 3;
}
.content{
padding:16px;
background-color:rgba(230,199,177,255);
margin-left: 2%;
margin-right: 50%;
margin-top: 2%;
border-radius:4px;
position: relative;
z-index: 1;
}
.imgContent{
position: absolute;
z-index: 2;
left: 50%;
width: 100%;
height:auto;
}
.exampleImg{
width: 32%;
height:auto;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
<body>
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> The sticky bar</div>
<div class="mainContent">
<div class="imgContent">
<img class="exampleImg" src="Images/example.png" width="300" height="200">
</div>
<div class="content">
<h3>Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed
fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget
hendrerit.
</h3>
</div>
<img src="Images/example.png" width="300" height="200">
<img src="Images/example.png" width="300" height="200">
</div>
</body>
Please excuse me for such messy code, I'm still learning how to do some things. The measurements I'm still working on a bit, but any help is appreciated! If there's anything I've missed, or need to include, please let me know.
That's because imgContent is taking position: absolute, left: 50% so the element will overflow the page because you also set the width of imgContent to 100% there's 3 ways to fix this
set witdth to less than 100% something like 45% is enough
set Left to 0;
use flex box instead that's will be better in fact
Welcome to SO,
Try this!
It seems that the 50% left was adding the whitespace!
body {
margin: 0;
overflow-x: hidden;
width: 100vw
}
.top-container {
background-color: white;
background-image: url("images/charmlogoTrans.png");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 100vw;
}
.menuBar {
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
z-index: 3;
}
.content {
padding: 16px;
background-color: rgba(230, 199, 177, 255);
margin-left: 2%;
margin-right: 50%;
margin-top: 2%;
border-radius: 4px;
position: relative;
z-index: 1;
}
.imgContent {
position: relative;
z-index: 2;
width: 100vw;
height: auto;
}
.exampleImg {
width: 32vw;
height: auto;
}
.sticky {
position: fixed;
top: 0;
width: 100vw;
}
.sticky+.content {
padding-top: 102px;
}
<body>
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> The sticky bar</div>
<div class="mainContent">
<<div class="imgContent">
<img class="exampleImg" src="Images/example.png" width="300" height="200">
</div>
<div class="content">
<h3>Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget hendrerit.
</h3>
</div>
<img src="Images/example.png" width="300" height="200">
<img src="Images/example.png" width="300" height="200">
</div>
</body>
Related
I have multiple divs that are stacked in a vertical fashion but when I resize the window the text from one div overflows into other divs and all text on the page becomes unreadable because they are all overlaying eachother. Is it possible to make it so that when the window is resized instead of divs overflowing into eachother they instead expand their height so they are stacked on top of eachother?
Here's my CSS
.middle {
height: 100%;
width: 65%;
position: relative;
top: 74px;
margin: auto;
}
.middle .portSection {
position: relative;
display: inline-block;
width: 100%;
height: 450px;
}
.middle .portSection .left {
position: absolute;
height: 100%;
width: 50%;
left: 0px;
}
.middle .portSection .right {
position: absolute;
height: 100%;
width: 50%;
right: 0px;
}
.middle .portSection .left .description {
position: relative;
height: auto;
width: 100%;
font-size: 30px;
}
".middle" is what holds all of the divs, ".middle .portSection .left .description" is the p element that is overflowing
Most of your css seems redundant here. By using position absolute you are removing the elements from the document flow.
I recommend you instead use flexbox as it's much better designed to handle this type of layout.
.middle .portSection {
display: flex;
height: 450px;
}
.middle .portSection .left {
background: #f88;
flex:1;
}
.middle .portSection .right {
background: #88f;
flex:1;
}
.middle .portSection .left .description {
font-size: 30px;
}
<div class="middle">
<div class="portSection">
<div class="left">
</div>
<div class="right">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue nisi pellentesque, consectetur tellus sit amet, convallis sem. Pellentesque in ante mauris. Quisque sodales ex sagittis, eleifend tellus eget, iaculis risus. Aenean imperdiet risus
eu lacus varius, non auctor tortor vehicula. Phasellus sed augue in neque auctor tempor. Cras bibendum mauris velit, id rhoncus diam fermentum eget. Proin quis condimentum nisl. Fusce consequat augue ullamcorper, ornare felis quis, volutpat mauris.
</p>
</div>
</div>
</div>
try adding this to your styles
.left .description {
max-width: 100%;
}
Or,
.left .description p {
word-wrap: break-word;
}
Try
.middle .portSection .left .description {
position: relative;
height: 100%;
width: 100%;
font-size: 30px;
}
It should work :)
.middle {
height: fit-content;
width: 65%;
position: absolute;
top: 74px;
margin: auto;
}
.middle .portSection {
position: relative;
display: inline-block;
width: 100%;
height: 450px;
}
.middle .portSection .left {
position: absolute;
height: 100%;
width: 50%;
left: 0px;
}
.middle .portSection .right {
position: absolute;
height: 100%;
width: 50%;
right: 0px;
}
.middle .portSection .left .description {
position: absolute;
margin: 10px 0;
padding: 2px 0;
height: max-content;
width: 100%;
font-size: 30px;
}
if this does not work, then please share your HTML also.
I can't understand what you want to explain but I some what figure out that you want to show two paragraphs side by side in middle. Right?
the problem caused because you user position absolute and relative as the div scale full display after adding position absolute and it is very difficult to figure out relative position for all child div if you are not well familiar with position properties. In this case I will suggest you to use flex-box. It will make your work easy as below :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
*
{
padding: 0px;
}
.middle {
display: flex;
width: 65%;
margin: auto;
align-items: center;
height: 90vh;
}
.middle .portSection {
display: flex;
width: 100%;
height: 450px;
}
.middle .portSection .left {
background: grey;
display: flex;
width: 100%;
height: 100%;
padding: 5px;
}
.middle .portSection .right {
background: grey;
display: flex;
width: 100%;
height: 100%;
padding: 5px;
}
.middle .portSection .left .description {
background: skyblue;
height: auto;
width: 100%;
font-size: 30px;
}
.middle .portSection .right .description {
background: skyblue;
height: auto;
width: 100%;
font-size: 30px;
}
</style>
</head>
<body>
<div class="middle">
<div class="portSection">
<div class="left">
<p class="description">Here is a div1 sddfsdafdsfdsf ds dsfds s fdsaf sdf dsf sdfds fdsf d fdf dsf ds fdsfds fdsf dsa f dsa fda</p>
</div>
</div>
<div class="portSection">
<div class="right">
<p class="description">Here is a div2 sddfsdafdsfdsf ds dsfds s fdsaf sdf dsf sdfds fdsf d fdf dsf ds fdsfds fdsf dsa f dsa fda</p>
</div>
</div>
</div>
</body>
</html>
I'm working on the sidebar where we have a logo at the top and some bottom div. The middle div "content" has overflow: scroll and contains paragraph(s). So what I need... If I have only one paragraph (or two p) the button div should be positioned absolutely at the bottom of the content and if I have more paragraphs which have a bigger height than "content" div so then the button div will have position static (so will be scrollable).
And I need it only by CSS. Is it possible?
We need IE11+ support.
<div class="sidebar">
<div class="logo">logo</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor egestas ornare. Suspendisse potenti. Integer non euismod nulla. Quisque pretium est sit amet congue rhoncus.</p>
<div class="button">
Button
</div>
</div>
<div class="bottom"></div>
</div>
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 300px;
background-color: grey;
}
.logo {
position: absolute;
width: 100%;
height: 55px;
background-color: red;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
}
.content {
position: absolute;
top: 55px;
bottom: 100px;
overflow-y: scroll;
}
.button {
display: inline-block;
padding: 1em 0 1em;
text-align: center;
width: 100%;
border-radius: 50px;
background-color: white;
}
You can use flexbox. Add this to your CSS:
.content {
display:flex;
flex-wrap: wrap;
}
.button {
align-self: flex-end;
}
That will render the button always at the end of the content div.
I have a colored semi-transparent div (.box) in front of some other divs (.textDisplay) containing text. One of these background divs (on the left) displays correctly, with the text faded due to the transparent div overlaid on top of it. The other one, though, doesn't fade at all. I want both divs displaying like the one on the left.
EDIT: I cannot modify the HTML's structure (it's generated by Elm in a nested manner). Is there a way to do this with CSS only?
EDIT 2: It was a stacking context problem due to the transform property. See my answer for further details.
.textDisplay {
height: 100%;
width: 100%;
text-align: center;
}
.box {
width: 200px;
padding: 20px;
background-color: #8CA8DA;
position: absolute;
top: 50%;
left: 50%;
margin-left: 20px;
transform: translateY(-50%);
opacity: 0.8;
}
.behind {
position: absolute;
transform: translate(-50%, -50%);
}
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 0</div>
<div class="box" style="z-index: 100;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
</div>
</div>
</div>
</div>
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 1</div>
</div>
</div>
</div>
Like this?
.textDisplay {
height: 100%;
width: 100%;
text-align: center;
}
.box {
width: 200px;
padding: 20px;
background-color: #8CA8DA;
position: absolute;
top: 50%;
left: 50%;
margin-left: 20px;
transform: translateY(-50%);
opacity: 0.8;
}
.behind {
position: absolute;
transform: translate(-50%, -50%);
}
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 1</div>
</div>
</div>
</div>
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 0</div>
<div class="box" style="z-index: 100;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
</div>
</div>
</div>
</div>
Put .box outside of .behind. I tweaked the css a bit to demo but you'll get the idea.
.textDisplay {
height: 100%;
width: 100%;
text-align: center;
}
.box {
width: 200px;
padding: 20px;
background-color: #8CA8DA;
position: absolute;
top: 50%;
left: 15%;
margin-left: 20px;
transform: translateY(-50%);
opacity: 0.8;
}
.behind {
position: absolute;
transform: translate(-50%, -50%);
}
<div class="box" style="z-index: 100;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
</div>
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 0</div>
</div>
</div>
</div>
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 1</div>
</div>
</div>
</div>
The transform property creates a new stacking context. As the linked article explains, this stacking context is then atomically (as a single thing) incorporated within it's parent stacking context. The z-index defined within it cannot transcend the context. There are diagrams illustrating this much better in the article.
Instead of using transform: translate(-50%, -50%); for centering, we can use left: -50%; top: -50%;, as demonstrated by the modified snippet. There has to be one div with the desired width and height (.behind) who's top left corner is where we want the center of the target div to be. See the .content class for an example of how to achieve the centering of the target div.
Once the div is centered with an alternate method, everything is in the same stacking context. Now a simple z-index: 100 on the desired element (or one of it's children, like in the snippet) will raise it above the rest, achieving the desired transparency effect.
.textDisplay {
height: 100%;
width: 100%;
text-align: center;
}
.box {
width: 200px;
padding: 20px;
background-color: #8CA8DA;
position: absolute;
top: 50%;
left: 50%;
margin-left: 20px;
transform: translateY(-50%);
opacity: 0.8;
}
.content {
left: -50%;
top: -50%;
height: 100%;
width: 100%;
position: absolute; /* or relative */
}
.behind {
position: absolute;
/*transform: translate(-50%, -50%); REMOVED*/
}
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 0</div>
<div class="box" style="z-index: 100;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
</div>
</div>
</div>
</div>
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 1</div>
</div>
</div>
</div>
I am struggling with a layout problem and I hope to find some help to solve it.
I am designing a page with row/lane based content.
Each row has multiple div elements with some content.
So it has to be possible to scroll through the rows vertically as well as horizontally.
Now the problem is, that the first div element inside every row is kind of like the row header, which provides some description about the content of that row.
I want this div element to always stay visible during horizontal scrolling.
Position: fixed is not a option since it would prevent the "row-header" to scroll with its content during a vertical scroll.
What it should look like during a horizontal scroll
Here's the fiddle with my code: https://jsfiddle.net/rco56cbp/
html,
body {
font-family: 'Arial', sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
header {
background: #F7F7F7;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.50);
/**/
width: 100%;
height: 90px;
/**/
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 55;
top: 0;
}
/* Left Sidebar */
.side-bar-bg {
width: 130px;
height: 100vh;
z-index: -1;
position: fixed;
background: #F7F7F7;
border: 1px solid #E0E0E0;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
}
/* Wrapper around main content */
.content-container {
margin-top: 110px;
height:100%;
position:absolute;
width:100%;
}
/* Content elements*/
.lane,
.lane-head,
.phase,
.lane-content {
display: flex;
}
.lane {
margin-bottom: 1.25em;
//flex-direction: row;
align-items: center;
}
.lane-head {
min-width: 130px;
background-color: #ffffff;
box-shadow:0px 0px 0px 1px #BFC0C2 inset;
/* Flex & Layout */
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-self: stretch;
/**/
margin-right: 1em;
}
.lane-label {
font-weight: 500;
font-size: 13px;
color: rgba(82,94,106,0.65);
line-height: 22px;
margin-left: 1em;
margin-right: 1em;
text-align: center;
}
.lane-content {
z-index: -3;
}
/* Grid System */
.col-1 { min-width: 200px; max-width: 200px; }
.col-2 { min-width: 420px; max-width: 420px; }
.col-3 { min-width: 640px; max-width: 640px; }
.col-1, .col-2, .col-3 { margin-right: 20px; }
.textbox {
padding: 0.7em 1em 1.5em 1em;
color: #FFFFFF;
min-width: 200px;
max-width: 200px;
background-color: #78BE20;
}
.phase {
background: #005691;
align-self: stretch;
align-items: center;
padding: 0.6em 1em;
}
/* Typo */
.phase {
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
}
.textbox h3 {
font-weight: bold;
font-size: 16px;
margin: 0 0 0.3em 0;
}
.textbox p {
font-weight: normal;
font-size: 13px;
margin: 0 0;
}
<header>
<h1>Header</h1>
</header>
<div class="side-bar-bg"></div>
<!------ CONTENT ------>
<div class="content-container">
<div class="lane">
<div class="lane-head"><span class="lane-label">Small Boxes</span></div>
<div class="lane-content">
<div class="phase col-2">Lorem Ipsum</div>
<div class="phase col-3">Bacon Ipsum</div>
<div class="phase col-2">Egg Ipsum</div>
</div>
</div>
<div class="lane">
<div class="lane-head"><span class="lane-label">Bigger Boxes</span></div>
<div class="lane-content">
<div class="textbox col-1">
<h3>Aenean commodo</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
</div>
</div>
</div>
The fixed left sidebar shall serve as a background to the "lane-headers".
The reason I want the lane-headers and the lane-content to be inside one div container is that later the whole canvas becomes dynamic and interactive. The content will be generated dynamically and the user will be able to interact with the canvas with drag-drop and so on.
I would appreciate your help very much, thanks in advance!
Hi you need to use javascript as well, once you scroll down or up add a class say posi_stat which will be position:static.and when you do horizontal scrolling just remove the class. In default case it will be position :fixed .
Something like this , you need to remove the class , and add on scrolldown too
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
//your code , what should be done//
}
});
});
Similarly to it for .scrollBottom(); .scrollRight(); .scrollLeft();
Okay I kind of found a solution to it thanks to this: Fixed position in only one direction in future releases of CSS?
Although the javascript solution did not work for me (I still can't figure out why), the CSS solution works pretty good.
By adding the following lines to the .lane-head class the problem was solved:
left: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
Using the new "position: sticky" property you can perfectly stick any element basically anywhere you want.
Unfortunately Chrome still does not support this yet, but Safari and Firefox do.
I'm trying to create a layout where two elements float next to eachother originating from the midddle.
I've managed to do this but only when the two floating elements have a fixed width.
http://jsfiddle.net/q7uey80L/3/
Does anyone know how to do the same setup with width: 300px; for elements .right and.left replaced with a percentage?
If I change the 300px to say 20%, the structure fails and the elements originate from the left in stead of from the middle.
It's not clear to me what you are trying to do but I suspect float is not the way. This feels like flexbox is going to be the solution.
.container {
border: solid blue 1px;
display:flex;
justify-content:center;
}
.right, .left {
width: 25%;
border: green solid 1px;
}
h1 {
margin: 0;
padding: 0;
}
.wrapper {
border: solid red 1px;
text-align: center;
}
.container {
border: solid blue 1px;
display: flex;
justify-content: center;
}
.right,
.left {
width: 25%;
border: green solid 1px;
}
.right {
text-align: left;
}
.left {
text-align: right;
}
.clear {
clear: both;
}
<div class="wrapper">
<h1>Top titel</h1>
<div class="container">
<div class="left">
Quisque viverra ac augue porta auctor. Fusce sollicitudin tellus risus, sit amet commodo felis tristique in.
<br/>Integer tempor ultricies eleifend. Vivamus id pretium dolor, vitae sagittis massa.
<br/>Pellentesque pulvinar neque interdum dolor pulvinar tempus. Nullam congue tempus dignissim.
</div>
<div class="right">
Vivamus massa lacus, dignissim ac accumsan non, lacinia in libero. Nullam tempor, velit nec fringilla feugiat, arcu libero viverra nibh, ullamcorper ultricies ante felis non risus.
<br/>Vivamus feugiat augue nec tellus sodales interdum. Suspendisse ac libero malesuada
</div>
<div class="clear"></div>
</div>
</div>
You need to have another div between the container and left/right divs. You can then give width as percentage, with margin: 0 auto on the container.
.right, .left {
border: green solid 1px;
float: left;
width: 45%;
}
<div class="container" >
<div style="width: 60%;margin: 0 auto;height: 200px">
<div class="left">
Quisque
</div>
<div class="right">
Vivamus
</div>
</div>
</div
check this out:
http://jsfiddle.net/z6s1ddnx/1/
Is this what you meant: https://jsfiddle.net/anjalysaju123/5pypkfky
the css is:
h1 {
margin: 0;
padding: 0;
}
.wrapper {
border: solid red 1px;
width: 100%;
height: 100%;
text-align: center;
}
.container {
border: solid blue 1px;
display: inline-block;
}
.right, .left {
border: green solid 1px;
float: left;
width: 49%;
}
.right {
text-align: left;
}
.left {
text-align: right;
}
.clear {
clear: both;
}
I think it is because of .container display is set to inline-block and it has no width set. If you set percentage for .left and .right - percentage are related to containeng element. Set .container width to exact value and you can set percentage width for inner elements. http://jsfiddle.net/q7uey80L/5/
.container {
border: solid blue 1px;
display: inline-block;
width: 500px;
}
.right, .left {
border: green solid 1px;
float: left;
width: 30%;
}