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>
Related
I've got a relatively long phrase that consumes way too much space on mobile devices. It looks something like this:
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.container {
width: 100%;
height: 100%;
}
.text {
/*
* Don't want to change font-size, because text
* sometimes maybe shorter and 2.2rem is perfect
* for phrases that are not as long
*/
font-size: 2.2rem;
}
<body class="artificial-phone-viewport">
<div class="container">
<div class="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
</div>
</div>
</body>
What I want is to make this text span at most, let's say, 10rem height. If it can't fit into 10rem of height, it should instead expand horizontally, maybe, overflowing its parent, maybe like this:
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.text {
font-size: 2.2rem;
white-space: nowrap;
}
<body class="artificial-phone-viewport">
<!-- Deleted container to reduce code, it actually
doesn't matter, because it anyway spans
100% width and height of its parent -->
<div class="text">
Lorem ipsum dolor, sit amet consectetur<br/>
adipisicing elit. Temporibus saepe illum<br/>
a magni sequi error fugit dolore neque<br/>
voluptates in laborum.
</div>
</body>
P.S. This snippet is just an example of what I want to see, I don't want any of these <br/>s or white-space: nowrap. Also I want the text to overflow its parent, because I then can use Javascript to scale it propertly, but it is not very relevant for the question, I suppose.
So I figured out a way to do it with Javascript, although I don't like it too much. I just increased the width of the element, until the height was small enough, like this
const text = document.querySelector('.text')
const rem = parseFloat(
getComputedStyle(document.documentElement).fontSize
)
let width = text.clientWidth / rem
while(text.clientWidth > 10*rem) {
width++
text.style.width = `${width}rem`
}
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.text {
font-size: 2.2rem;
}
<body class="artificial-phone-viewport">
<div class="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
</div>
</body>
It's not very nice, but it works for me. If someone finds a way to do it without javascript, I'm open to other solutions
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;
}
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>