I am trying to build a centrally divided layout using bootstrap.
the left side of the screen should be fixed and the right side of the screen should be scrollable.
It works fine so far, but when I test the layout on small devices, the right part of the screen gets two scrollbars.
When I hide the scrollbar on small devices, the content on the right side is not scrollable any more.
changing overflow:auto; to overflow:visible; solves the problem with two scrollbars, but the left side of the screen is not fixed any more and scrolls with the right side.
position:fixed; doesn't solve the problem.
here is the code:
.lw { font-size: 60px; }
body {
margin: 0;
}
#left {
background-color: yellow;
height: 100%;
overflow: hidden;
}
#right {
background-color: pink;
height: 100%;
overflow: auto;
text-align: center;
font-size: 8vw;
}
.container_left {
padding-top: 10%;
padding-bottom: 10%;
}
#question {
text-align: center;
font-size: 4vw;
padding-bottom: 50px;
}
#tip {
text-align: center;
}
#media screen and (max-width: 768px) {
#right{
overflow: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" id="left">
<div class="container_left">
<p id="question">Lorem ipsum dolor sit amet</p>
<p id="tip">tip</p>
</div>
</div>
<div class="col-lg-6" id="right">
<p style="color:red">start</p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<p style="color:red">end</p>
</div>
</div>
</div>
</body>
</html>
I would appreciate your advice.
best regards
Apply this css to hide the scrollbar in your second block. This will hide the scrollbar in that individual element but keep the site's main scrollbar:
#element::-webkit-scrollbar {
display: none;
}
Note that this won't have full browser support.
Another, better solution would be to rework your html/css in general so that the first block is set in a fixed position while the remainder of the page scrolls as normal. This will have wider support across platforms. This way you're not fiddling with scroll bars.
Related
I have a container centered with a max width as follow:
#container {
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
Now I want to create a new div just below the contained one, but I want this new div to align to the left and expand beyond the right side of the container. Something like that:
|||||||||||||||||||||||||||||||||||| #container
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| #div 2
The difficulty is that #container margins are auto, so how can I force #div to follow #container left margin as the browser resizes?!
NOTE: I am looking for a pure CSS solution WITHOUT JAVASCRIPT
EDIT: It was not clear in my explanation but, my goal was to make the #div ADJACENT to the #container. Like this:
<div id="container"></div>
<div id="div"></div>
I ended up refactoring my html to use #bananabran solution with absolute positioning which simply uses parent-child structure:
<div id="container">
<div id="div"></div>
</div>
You don't have to force the div to follow its container's left margin. Divs naturally start at the top-left of their container (unless otherwise specified or affected by). You also do not need to use Grid or FlexBox. CSS3, and even CSS2 can do this natively.
See working CodePen example: https://codepen.io/bananabrann/pen/QWWdXQZ
Assuming you have no other code affecting your code...
<div id="container" />
<div id="my-div" />
#container {
background-color: blue;
position: relative;
margin: 0 auto;
width: 900px;
height: 300px;
}
#my-div {
background-color: red;
position: absolute;
bottom: 0;
width: 500px;
height: 20px;
}
CSS-Grid can do that:
.wrap {
display: grid;
grid-template-columns: 1fr minmax(auto, 400px) 1fr;
/* 400px for demo purposes */
}
.container {
padding: 1em;
background: pink;
grid-column-start: 2;
}
.wide-r {
padding: 1em;
background: lightgreen;
grid-column: 2 / span 2;
}
<div class="wrap">
<div class="container">Container
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, similique, maxime aspernatur dolorum quod recusandae possimus fuga blanditiis laudantium delectus quis magni. Veniam, consequuntur dolores facilis cupiditate fugiat ullam aspernatur!
Corporis excepturi quos esse voluptatem voluptatibus corrupti ea, tempora culpa magni, hic aspernatur pariatur molestias itaque doloremque assumenda ad fugiat!</p>
</div>
<div class="wide-r">Wide Right</div>
</div>
I am well aware of the concept of "overflow" in HTML/CSS. But here I am stuck at a very simple issue.
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
}
section {
width: 70%;
text-align: justify;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section</section>
</div>
My wrapper div consists of aside and section.I tried to align them side by side with total width of the container. But it always appear that section overflows.I wonder why? The total width of aside plus section has never crossed width of its wrapper container.It only works if I put overflow:hidden in the section.
All you need to do to overcome the effect of the section overflowing is to set overflow to auto on the section. Now you will not need to set float on the section,...
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
background: green;
}
section {
width: 70%;
text-align: justify;
overflow:auto;
background: red;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.</section>
</div>
but be aware of the fact that if the content (any child elements) of section are extending the boundary of section will cause scrollbars on the section. So keep that in mind. You could as well use overflow:hidden which will work as well in your situation, but then any content that exceeds the boundary of section will be hidden. In case of overflow:hidden you could do the following to prevent this behavior. An example with an image as a child element of section could look like this.
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
background: green;
}
section {
width: 70%;
text-align: justify;
background: yellow;
overflow:hidden;
}
section img {
width:100%;
height: auto;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.
<img src="http://placehold.it/1000x1000" />
</section>
</div>
I've spent a lot of time trying to figure out how I can create a layout similar to this, where the pages content is constrained by the container element's width, but the column on the left has a background that stretches to the far left of the user's screen (the yellow one in the example).
I'm trying to do this with Bootstrap, but it seems impossible as the container element contains the content of the page and also it's background.
Here is the JSFiddle for what I have so far.
Some sample code of the structure:
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Would really appreciate if someone can solve this mystery for me.
Here's the full code:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body{
background: #eee;
}
.left-one{
background: yellow;
height: 500px;
padding-top: 20px;
}
.right-one{
background: #eee;
height: 500px;
padding-top: 20px;
}
.some-content{
background: lightslategray;
padding: 20px 0;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Just do what the guy have done in example & use the before element.
DEMO
CSS:
.left-one:before{
background: yellow;
bottom: 0;
content: "";
position: absolute;
right: 100%;
top: 0;
width: 9999px;
}
Basically want I want is for my large image to be to the left of my two small images, and I want my two small images to be stacked on top of one another. Currently I'm running the class "small-images" with a width of 30% because it makes them stack like I want, but I feel there is a better way to do this. Also these three images are going to run next to some text which is why I have all of them in one big div together so I can float them to the right of the main text. I don't mind if you take my code apart I'm trying to find the most efficient way possible and I'm using HTML5 and CSS3.
HTML5
<div class="images">
<div class="large-image">
<!--This is a larger image-->
<img alt="bussiness lage picture" src="Images/buisness-big.jpg">
<div class="small-image">
<!--These are two smaller images-->
<img alt="bussiness lage picture" src="Images/handshake.jpg">
<img alt="bussiness lage picture" src="Images/calculator.jpg">
</div>
</div>
</div>
CSS 3
/*This deals with the main images right of the main content*/
.images {
float: left;
margin-top: 3%;
}
.large-image {
float: left;
margin-left: 10%;
}
.small-image {
width: 30%;
float: right;
}
You can use this kind of structure :
.images {
float: left;
margin-right: 10px;
}
.images img {
float: left;
}
.images .thumbs {
float: left;
margin-left: 10px;
}
.images .thumbs img {
clear: both;
margin-bottom: 10px;
}
<article>
<aside class="images">
<img src="http://placehold.it/300/2ecc71/fff"/>
<div class="thumbs">
<img src="http://placehold.it/145/3498db/fff"/>
<img src="http://placehold.it/145/e74c3c/fff"/>
</div>
</aside>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis suscipit dolorum repellat eveniet error a aliquam magni laudantium pariatur adipisci quisquam nesciunt unde quo. Quae ab explicabo et iure minus id ad placeat ducimus eos delectus assumenda recusandae labore! Minus modi error. Illo mollitia consequuntur ipsam fugit voluptatibus eos repudiandae!
</article>
I want to vertically align a span after a floated image.
I searched for it in stack overflow and find this post. but my image is floated.
<div>
<img style="width:30px;height:30px; float:left">
<span style="vertical-align:middle">Doesn't work.</span>
</div>
I give vertical-align:middle to image and nothing change!
Thanks
Even though this is an extremely old post, you can achieve this using Flexbox:
div {
display: flex;
align-items: center;
}
<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>
JsFiddle example
First remove float from it. Write like this:
<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
<span>Doesn't work.</span>
Check this http://jsfiddle.net/ws3Uf/
Add line-height (equal to picture height):
<div>
<img style="width:30px;height:30px; float:left">
<span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>
See example.
You can manually change as well
<div>
<img style="width:30px;height:30px float:left">
<span style="float:left;padding-top:15px;">Will work.</span>
</div>
Demo
Or you can use a table
A <span> is an inline element, try adding display:block to the span, give it the same height as the image and a line height to match. Float it left as well. That should work
You could do the following:
div:after {
content:"";
clear:both;
display:block;
}
float the picture
set a height to picture.
put a div1>div2>text after the picture.
set div1 the same height as the picture.
set div2 position relative, top 0 and transform translateY -50.
https://codepen.io/aungthihaaung/pen/ExXGvGy
.picture {
height: 300px;
float: left;
}
.div1 {
height: 300px;
}
.div2 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<img src="https://via.placeholder.com/300" class="picture" />
<div class="div1">
<div class="div2">
<h1>Hi There!</h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, deleniti
perferendis! Ut, eaque iste incidunt atque perferendis odio laborum
nobis obcaecati exercitationem molestiae nihil est recusandae
mollitia. Fuga beatae inventore, adipisci ipsa aliquid corporis harum
ex tenetur iure assumenda optio quod eaque omnis porro ab consequuntur
unde a totam minima.
</div>
</div>