Essentially this is what I'm getting...
While this is what I want.
I have the image height and width set up like this...
#content img{
padding: 3%;
width: 60%;
height: 50%;
float: left;
}
With %s as I want it to be responsive and all. So the exact height of the image in px I can't really tell.
When I try to set up the same dimensions for the gray box, it only fills up with what is in it as you can see.
#text{
padding: 3%;
margin-right: 3%;
margin-top: 3%;
width: 37%;
height: 50%;
float: left;
background-color: #333333;
color: #FFFFFF;
}
Anyway on how to go about this? I'm also starting to think the problem may be I'm trying to make it responsive incorrectly.
Thanks in advance.
EDIT: Here is the HTML
<div id="content">
<img src="projectphotos/1.jpg">
<span class="arrows" style="float: right;"><i class="fa fa-angle-`double-right fa-3x"></i></span>`
<div id="text">
Test
</div>
</div>
You can use Flexbox
body, html {margin: 0; padding: 0}
.content {
display: flex;
}
.text {
background: #333333;
color: white;
flex: 1;
margin: 10px;
}
.image {
flex: 2;
margin: 10px;
}
img {
width: 100%;
vertical-align: top;
}
<div class="content">
<div class="image">
<img src="http://placehold.it/900x450">
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, id.</div>
</div>
just add display: flex to #content and remove the float: left from both.
Related
I am using only CSS and Flexbox to build a responsive page. I have a child element that should "overflow" outside the parent element as shown here:
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="assets/image-1.jpg">
</div>
</div>
CSS
.container-hero {
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
position: relative;
margin: 40px 0;
}
.hero-img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.hero-img img {
width: 100%;
height: auto;
}
.hero-content {
background-color: #D64C31;
color: #FFFFFF;
align-self: flex-end;
width: 50%;
position: absolute;
bottom:0;
left:0;
padding: 40px 60px;
}
Any help would be appreciated!
Like that?
<html>
<head>
<style>
.container {
background: #ccc;
width: 50%;
margin: 0 auto;
position: relative;
height: 700px;
}
.overflowing-element {
background: red;
width: 200px;
height: 200px;
position: absolute;
right: -200px;
top: 0;
}
</style>
</head>
<body>
<div class="container">
test
<div class="overflowing-element">
bla
</div>
</div>
</body>
</html>
Just works with fixed width of that overflowing element, or with JavaScript.
EDIT: You just edited your images and now I don't know really what you mean :D
I figure it out, thank you for your help!
My parent element had an overflow: hidden I disabled it and adjusted the child element as follows:
bottom: -40px
If you have any feedback or this is considered a bad practice please let me know. I am just starting out here :)
.container-hero {
display: flex;
justify-content: flex-start;
align-items: center;
/* overflow-x: hidden; */
position: relative;
margin: 40px 0;
}
.hero-img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.hero-img img {
width: 100%;
height: auto;
}
.hero-content {
position:absolute;
background-color: #D64C31;
color: #FFFFFF;
width: 50%;
padding: 40px 60px;
bottom: -20px;
left:0;
}
</div>
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="https://source.unsplash.com/800x300">
</div>
</div>
The property you are looking for is CSS Position.
Reference: CSS Position
.parent{
width:250px;
height: 20px;
background: yellow;
position:relative;
}
.child{
width:80px;
height: 100px;
background: purple;
position:absolute;
bottom: 0;
right:0;
}
<div class="parent">
<div class="child"></div>
</div>
Use the CSS positioning properties.
.container-hero {
position: relative; /* creates the container for absolutely positioned children */
}
.hero-content {
position: absolute;
bottom: -20px; /* use this offset to align vertically */
left: 20px; /* use this offset to align horizontally */
background-color: #D64C31;
color: #FFFFFF;
width: 225px;
padding: 40px 60px;
}
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="https://via.placeholder.com/500x250.png?text=hero image">
</div>
</div>
Can someone tell me why I'm able to style the header class but not my MainContent class? Only the Lorum Ipsum text shows up. The maincontent div doesn't show any width, height or color. Thanks for any help!
.header {
width: 100%;
height: 90px;
background-color: blue;
}
.header img {
height: 80%;
margin-top: 10px;
margin-left: 260px;
}
.MainContent {
width: 100%;
height: 80%;
background-color: yellow;
}
<div class="header">
<img src="img/epic_it.png" alt="epicit logo">
<nav></nav>
</div>
<div class="MainContent">
<h1>
Lorem ipsum
</h1>
</div>
You have a really strange piece of markup at the end of your .header img declaration, which is being considered a CodeMirror invalid character, and causing any CSS that follows it to break. If you edit your snippet, you'll see a red circle there, though it is invisible in the snippet preview.
Simply removing that fixes the problem:
.header {
width: 100%;
height: 90px;
background-color: blue;
}
.header img {
height: 80%;
margin-top: 10px;
margin-left: 260px;
}
.MainContent {
width: 100%;
height: 80%;
background-color: yellow;
}
<div class="header">
<img src="img/epic_it.png" alt="epicit logo">
</div>
<div class="MainContent">
<h1>
Lorem ipsum
</h1>
</div>
Hope this helps! :)
I have 3 column grid with images using flexbox. The issue I encountered is how to properly put smaller image in the middle column to the bottom and the center text vertically in the rest space using flexbox.
I have very ugly solution, which quite unresponsive, so I sure the is better solution for this. Read some articles and watch 3 video courses about flexbox, but didn't found a case with such situation.
Also tried to make smaller image absolute, but then I couldn't center text vertically as I wanted.
Would be grateful for any suggestions.
.container{
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
display: block;
}
.fe2{
flex: 1;
text-align: center;
}
.flex-cont-inner {
display: flex;
flex-flow: column;
height: 100%;
}
.flex-cont-inner img {
height: initial;
}
.message{
font-size: 2.3vw;
margin: 0 auto;
}
.message p {
color: blue;
font-size: 2vw;
max-width: 80%;
margin: 0 auto;
padding: 34.5% 0px;
}
.author{
position: relative;
}
.author:after{
content: 'ANONYMUS';
position: absolute;
font-size: 1vw;
color:red;
top: 140%;
}
<div class="container">
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
</div>
<div class="fe2 no-end">
<div class="flex-cont-inner">
<div class="message">
<p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
</div>
<img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
</div>
</div>
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
</div>
</div>
You need to use margin-top: auto; in both your message and your image. There's a really good explanation by Michael_B here about the use of auto margins with flexbox.
jsFiddle
CODE SNIPPET:
.container {
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
display: block;
}
.fe2 {
flex: 1;
text-align: center;
}
.flex-cont-inner {
display: flex;
flex-flow: column;
height: 100%;
}
.flex-cont-inner img {
height: initial;
margin-top: auto;
}
.message {
font-size: 2.3vw;
margin-top: auto;
}
.message p {
color: blue;
font-size: 2vw;
}
.author {
position: relative;
}
.author:after {
content: 'ANONYMUS';
position: absolute;
font-size: 1vw;
color: red;
top: 140%;
}
<div class="container">
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
</div>
<div class="fe2 no-end">
<div class="flex-cont-inner">
<div class="message">
<p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
</div>
<img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
</div>
</div>
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
</div>
</div>
I have created a jsfiddle for you to see what I'm doing.
https://jsfiddle.net/pksml/3mp1Lnw8/5/
#page-wrapper {
margin-left: 205px;
background-color: green;
}
The menu wrapper (orange) and the page wrapper (green) should both be at the top of the content wrapper (blue). But the green block looks to have a top margin (which it doesn't).
My question is this: why don't the orange and green blocks both line up at the top of the blue block?
Is some of my CSS code wrong? Thanks for your input!
It is the default margin of p tag which is pushing the green div down.
HTML {
background: #cccccc;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#bounding-wrapper {
min-width: 320px;
width: 100%;
padding: 10px;
}
#content-wrapper {
width: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
height: auto !important;
background-color: blue;
}
#menu-wrapper {
width: 200px;
background-color: orange;
float: left;
}
#page-wrapper {
margin-left: 205px;
background-color: green;
}
p{
margin: 0 0 20px;
}
<div id="bounding-wrapper">
<div id="content-wrapper">
<div id="menu-wrapper">
this is in the menu wrapper
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolores voluptatibus itaque dolor quod.</p>
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
<p>this is in the page wrapper</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum repellendus eum delectus deserunt molestiae cum,
</div>
<!-- page wrapper -->
</div>
<!-- content wrapper -->
</div>
<!-- bounding wrapper -->
You need to float both menu-wrapper and page-wrapper.
Looks like from your addition of the right margin you are trying to position the left menu? If so you could do something like this: https://jsfiddle.net/jgoley/98abyyp2/
jsfiddle
#page-wrapper {
float:left;
background-color: green;
}
use float:left instead of marigin left
I think the code below should work for you!
All I added was display: inline-block; to #menu-wrapper and #page-wrapper.
All I removed was the float: left; from #menu-wrapper and margin-left: 205; from #page-wrapper.
HTML {
background: #cccccc;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#bounding-wrapper {
min-width: 320px;
width: 100%;
padding: 10px;
}
#content-wrapper {
width: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
height: auto !important;
background-color: blue;
}
#menu-wrapper {
width: 200px;
background-color: orange;
display: inline-block;
}
#page-wrapper {
background-color: green;
display: inline-block;
}
<div id="bounding-wrapper">
<div id="content-wrapper">
<div id="menu-wrapper">
this is in the menu wrapper
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
<p>this is in the page wrapper</p>
</div>
<!-- page wrapper -->
</div>
<!-- content wrapper -->
</div>
<!-- bounding wrapper -->
Hope that helped!
you have two solutions,
you can set the display property of the #page-wrapper to be
display:inline-block
if you don't want to change its display property for any reason so
you can add float:left to the #page-wrapper as well
then no need for margin-left:205px in #page-wrapper
http://codepen.io/craigiswayne/pen/mPxJqv
** Makes use of flex box **
CSS:
.block{
width:100px;
height:100px;
background-color:#8BC34A;
}
.block.fill{
background-color:#F44336;
-webkit-flex: 1;
flex: 1;
}
.container {
display: -webkit-flex;
display: flex;
width:100%;
}
I want to create the following layout:
where the blue block is an image and the red and green blocks contain vertically centered text. The container needs to have position:fixed, the image is sized dynamically so that its height is set to the height of the container and the red and green boxes are of equal height and fill the remainder of the container horizontally.
I initially tried using divs:
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
background-color: red;
}
.imgContainer {
height: 100%;
float: left;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
background-color: yellow;
text-align: right;
display: table;
table-layout: fixed;
float: right;
}
.row1 {
height: 50%;
width: 100%;
display: table-row;
}
.row2 {
height: 50%;
background-color: blue;
display: table-row;
}
span {
display: table-cell;
vertical-align: middle;
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
This worked fine for the image but I couldn't figure out how to get the red and green divs to fill the remaining width satisfactorily.
My second attempt was based around tables but, again, I don't seem to be able to get the widths correct:
body {
background-color: red;
padding: 0;
border: 0;
margin: 0;
}
div {
background-color: yellow;
height: 15vh;
width: 100vw;
position: fixed;
}
table {
height: 100%;
width: 100%;
background-color: blue;
border-collapse: collapse;
table-layout: fixed;
}
tbody {
height: 100%;
width: 100%;
background-color: purple;
}
tr {
height: 50%;
width: 100%;
background-color: green;
padding: 0;
}
tr:last-child {
background-color: yellow;
}
td {
height: 100%;
padding: 0;
white-space: nowrap;
}
td:last-child {
max-width: 100%;
}
img {
max-height: 100%;
display: block;
}
<div>
<table>
<tbody>
<tr>
<td rowspan="2">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<tr>
<td>
More text.
</td>
</tr>
</tbody>
</table>
</div>
I have also had problems ensuring that both red and green sections remain at 50% of the total height, regardless of content.
How can I get either of these to work? Or is there a completely different approach that can work?
You don't say what your target market is, but since in most my work I only have to worry about the latest browser versions, this answer makes use of the new CSS flexbox. If you need compatibility with older browsers, see the 2nd set of code below.
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.imgContainer {
height: 100%;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
width: 100%;
}
.row1 {
background-color: red;
}
.row2 {
background-color: green;
}
.row1,
.row2 {
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
Below is a solution that works in older browsers, except IE9 and below where the text will not be properly centered vertically. If that's a concern, you might be able to find something that works on this page, but not knowing all your limitations, I was unable to select the right solution.
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
}
.imgContainer {
height: 100%;
float: left;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
}
.row1 {
height: 50%;
background-color: red;
}
.row2 {
height: 50%;
background-color: green;
}
span {
right: 0; /* right-justify */
}
.row1 > span {
position: absolute;
top: 25%; /* put the top 25% down within .container - the first non-static ancestor element */
transform: translateY(-50%); /* nudge the line up half it's height */
}
.row2 > span {
position: absolute;
top: 75%;
transform: translateY(-50%);
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>