Running into a layout issue between mobile/tablet and desktop.
For mobile: I need the hero image to be first, then the content to be beneath it. (sample here)
For tablet/desktop: I need the content to lay on top of the hero image. (sample here)
I've tried using a background image but found that adjusting the layout of the page effects the background image size and proportions
I've tried absolutely position one on top of the other but run into a scenario where I end up fiddling with the layout between views (using bootstrap) more than what should probably be manageable.
Would love any thoughts on how to produce this result.
Will try to provide code samples of what I've done but not sure it's relevant since none of it seems to produce the desired results.
Here's a quick example that I've created for you, please check:
#container {
background: red;
text-align: center;
padding: 20px 0px;
}
#image, #content {
display: inline-block;
width: 45%;
vertical-align: middle;
}
#image img {
width: 100%;
}
#media (max-width: 500px) {
#image, #content {
display: block;
width: 100%;
}
}
<div id="container"><div id="image"><img src="http://placehold.it/350x150" /></div><div id="content">Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. </div>
Click on Run Code Snippet and view the above snippet in Full Page and then reduce your browser window to 500px or smaller, you'll see that the content will automatically get under the image. Initially, both the <div> containing the image and the content are being displayed as inline-block but for screens smaller than 500px, we use #media-queries to change their display property to block which is why the content goes underneath the image.
Here's a CodePen example I set up to accomplish what you're asking: http://codepen.io/trevanhetzel/pen/pyCnf
Essentially, if you use an inline image as compared to a background image, you can set it's position to absolute at a certain media query breakpoint. With it's container positioned relative and the image's sibling (.hero-content) positioned relative, you can just float it right at that same breakpoint, change the width to however wide you want it, and it sits right on top of the image.
HTML
<div class="hero-contain">
<img src="http://lorempixel.com/1000/300/" class="hero-img">
<div class="hero-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a enim eu risus accumsan venenatis. Donec venenatis nunc ac tellus tempor, ac rutrum lorem semper. Suspendisse pulvinar elit sed luctus pulvinar. Donec id ultricies dui. Pellentesque suscipit nulla maximus, mollis urna laoreet, tempor tortor.</p>
</div>
</div>
CSS
.hero-contain {
position: relative;
margin: 0 auto;
max-width: 1000px;
}
.hero-img {
max-width: 100%;
}
.hero-content {
position: relative;
background: rgba(255, 255, 255, .5);
padding: 20px;
}
#media (min-width: 800px) {
.hero-img {
position: absolute;
}
.hero-content {
float: right;
width: 45%;
margin: 20px;
}
}
Use media queries.
When width of window will be less, than your tablet/desktop content, switch media query and just display your divs block. For displaying them in row use display:inline-block;
Example. Try to resize result window.
Related
I'm making my second test HTML file from PSD file.
In this picture you may see my issue.
Could you please guide me how to sit two images next to each other which have text below?
Also I want it be responsive.
For example in large screens, the two images sit next each other. In small screens each image in one separate line.
Thanks a bunch
first have the image and text in a box like this:
<div class="contentBox">
<img>
<h3>some title</h3>
<p>some text</p>
</div>
then float those boxes.
.contentBox{
float:left;
}
I made a quick snippet to show you how you could use it:
#boxes{
text-align:center;
}
.contentBox {
display: inline-block;
width: 200px;
border: 1px solid black;
margin: 20px;
}
.contentBox img {
width: 100%;
}
.contentBox h3 {
margin: 5px;
}
.contentBox p {
text-align: justify;
margin: 5px;
}
<div id="boxes">
<div class="contentBox">
<img src="http://via.placeholder.com/350x250">
<h3>some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mauris sem, in elementum tortor eleifend vel.</p>
</div>
<div class="contentBox">
<img src="http://via.placeholder.com/350x250">
<h3>some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mauris sem, in elementum tortor eleifend vel.</p>
</div>
</div>
I'm creating email template with variables in it. The variables will be replaced at run-time with one of two different sets of values as show below. The first set has an extra paragraph in the middle with a link embedded in it. The problem I'm having is getting the second and third paragraphs to have the correct spacing when they are combined. Is there some way to create a bottom margin from p3 to create that space between the second and third paragraphs?
Here is the template I am using.
Template
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
background-color: #f5f5f5;
}
.body-div{
width: 560px;
background-color: #ffffff;
padding: 10px 20px;
margin: 0 auto;
}
.below-spacing, .p3{
padding-bottom: 20px;
}
.above-spacing{
padding-top: 10px;
}
.p1:empty, .p2:empty, .p3:empty{
display:none;
}
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">{{FirstParagraph}}</div>
<div><span class= "p1">{{MidParagraphPart1}}</span><span class="p2">{{MidParagraphPart2}}</span><span class="p3">{{MidParagraphPart3}}</span></div>
<div>{{LastParagraph}}</div>
</div>
</body>
</html>
Example 1
In this example I've inserted values into all the variables showing all three paragraphs and the link with text in it. Notice how paragraphs two and three do not space correctly in a browser. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1">Section of Text #2, Part #1. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </span><span class="p2">(Part #2) Link text</span><span class="p3"> Part #3 Lorem ipsum dolor sit amet, et eget. Lorem ipsum dolor sit amet, et eget.</span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Example 2
In this example I've replaced only the first and last variables with text. The middle paragraph is hidden and both paragraphs are spaced correctly. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1"></span><span class="p2"></span><span class="p3"></span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Try this:
Add this to the end of your css.
.hidden{
display: none;
}
Then add the injectable variable Hidden to any element you want to hide on demand.
<div class="below-spacing {{Hidden}}"><span>{{Paragraph2}}</span><span>{{Paragraph3}}</span><span>{{Paragraph4}}</span></div>
Inject "hidden" (no double quotes) for the variable {{Hidden}}. That will hide the paragraph with the correct spacing.
You can remove the p1, p2, and p3 classes.
The span is inline tag. We can not set margin for it. You should set span to display: inline-block.
.p1,
.p2,
.p3 {
display: inline-block;
}
To hide second span you should add class empty for it:
<span class="p2 empty></span>
CSS:
.p1.empty,
.p2.empty,
.p3.empty {
display: none;
}
I saw some error in your HTML code.
your first span is missing " before the class name.
Your second span doesn't have a class. Maybe add p2 like you want.
I'm not sure to understand the whole question here, but why did you put a
display: none;
to your span?
Try
display: inline-block;
Another solution could be to remove span and add
<p>
instead and add that in your css
p{
margin-bottom:20px; //can add a class p3 to your p.
}
My requirement is simple: 2 columns where the right one has a fixed size. Unfortunately I couldn't find a working solution, neither on stackoverflow nor in Google. Each solution described there fails if I implement in my own context. The current solution is:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}
<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>
I get the following with above code:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|
Please advise. Many thanks!
Remove the float on the left column.
At the HTML code, the right column needs to come before the left one.
If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)
Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.
Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).
Example HTML:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
Example here: http://jsfiddle.net/jackJoe/fxWg7/
See http://www.alistapart.com/articles/negativemargins/ , this is exactly what you need (example 4 there).
<div id="container">
<div id="content">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
</div>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
#container {
width: 100%;
background: #f1f2ea url(background.gif) repeat-y right;
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: right;
Best to avoid placing the right column before the left, simply use a negative right-margin.
And be "responsive" by including an #media setting so the right column falls under the left on narrow screens.
<div style="background: #f1f2ea;">
<div id="container">
<div id="content">
<strong>Column 1 - content</strong>
</div>
</div>
<div id="sidebar">
<strong>Column 2 - sidebar</strong>
</div>
<div style="clear:both"></div>
<style type="text/css">
#container {
margin-right: -300px;
float:left;
width:100%;
}
#content {
margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
width:300px;
float:left
}
#media (max-width: 480px) {
#container {
margin-right:0px;
margin-bottom:20px;
}
#content {
margin-right:0px;
width:100%;
}
#sidebar {
clear:left;
}
}
</style>
Simplest and most flexible solution so far it to use table display:
HTML, left div comes first, right div comes second ... we read and write left to right, so it won't make any sense to place the divs right to left
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
</div>
CSS:
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
.right {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
Cases examples:
// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}
// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}
I'd like to suggest a yet-unmentioned solution: use CSS3's calc() to mix % and px units. calc() has excellent support nowadays, and it allows for fast construction of quite complex layouts.
Here's a JSFiddle link for the code below.
HTML:
<div class="sidebar">
sidebar fixed width
</div>
<div class="content">
content flexible width
</div>
CSS:
.sidebar {
width: 180px;
float: right;
background: green;
}
.content {
width: calc(100% - 180px);
background: orange;
}
And here's another JSFiddle demonstrating this concept applied to a more complex layout. I used SCSS here since its variables allow for flexible and self-descriptive code, but the layout can be easily re-created in pure CSS if having "hard-coded" values is not an issue.
This is a generic, HTML source ordered solution where:
The first column in source order is fluid
The second column in source order is fixed
This column can be floated left or right using CSS
Fixed/Second Column on Right
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Fixed/Second Column on Left
#wrapper {
margin-left: 200px;
}
#content {
float: right;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Alternate solution is to use display: table-cell; which results in equal height columns.
Hey, What you can do is apply a fixed width to both the containers and then use another div class where clear:both, like
div#left {
width: 600px;
float: left;
}
div#right {
width: 240px;
float: right;
}
div.clear {
clear:both;
}
place a the clear div under left and right container.
I have simplified it : I have edited jackjoe's answer. The height auto etc not required I think.
CSS:
#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}
#leftCol {
background: #e8f6fe;
width: auto;
}
#rightCol {
float:right;
width:30%;
background: #aafed6;
}
.box {
position:relative;
clear:both;
background:#F39;
}
</style>
HTML:
<div id="container">
<div id="rightCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
<div id="leftCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.
</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
How can I style a DIV with text in it so that if takes the minimum length between a min-width and a max-width?
For example, if I have the min and max set at 200 and 400px, I want:
a div with text shorter than 200px to be 200px wide
a div with text between 200px and 400px to have the width of the text
a div with text longer than 400px to be wrapped
This jsFiddle I made explains it better: http://jsfiddle.net/LHFSn/ ...it sounds simple and straight forward but I just can't seem to figure it out.
And no, the obvious:
min-width: 200px;
max-width: 400px;
...doesn't give me what I want at all.
Setting
display: inline-block
will allow you to achieve the desired result width-wise, but will also mean the elements will be displayed inline, that is, next to one another if they fit.
You can avoid this by wrapping your elements in block-style containers. While this sounds far from ideal it's the first idea off the top of my head that works.
Expanding on your further question, you can float these elements, wrap them in a container that's also displayed inline and then block it using Rúnar Berg's suggestion of empty blocks.
See sample jsFiddle
Clearfix reference
HTML:
ACTUAL:
<div></div>
<div class="wrapper cf">
<div class="flex-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
<div class="flex-text">
Lorem ipsum dolor sit amet.
</div>
<div class="flex-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div></div>
Further content
CSS:
.flex-text {
min-width: 200px;
max-width: 400px;
display: inline-block;
background: #def;
float: left;
clear: both;
}
/* this is just to show a 200px ruler for reference */
.flex-text:after {
content: "";
display: block;
width: 200px;
border-top: 4px solid black;
margin: 0 0 20px 0;
}
.wrapper {
display: inline-block;
background: lightblue;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
You can try to set the container display to table and the inner display to table-cell.
It might get you into more trouble though.
http://jsfiddle.net/fXxV3/3/
Problem:
Your .flex-text is a non-floated block element so by default it fills the width of its parent. In this case, max-width means if your parent is larger then take on the max-width and if your parent is smaller than min-width then take that value.
On the other hand, a floated block element with no width set will shrink to the size of its contents.
Solution:
You basically have to move your min/max width to an outer wrapper div which is not floated as you did, and then float the inner flex-text inside so that the background will only fill the area containing text:
So your markup becomes:
<div class="wrapper">
<div class="flex-text clearfix">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
<div class="wrapper">
<div class="flex-text clearfix">
Lorem ipsum dolor sit amet.
</div>
</div>
<div class="wrapper">
<div class="flex-text clearfix">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
So your css becomes:
.wrapper{
min-width: 200px;
max-width: 400px;
}
.flex-text {
background: #def;
float:left;
}
Also, since you are floating .flex-text, make sure to add a clearfix.
DEMO
It is possible to use text-indent property to indent the first line of text towards either side of left corner. Consider this example:
h1 { text-indent: -200px; margin-left: 200px; }
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula molestie imperdiet.</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vehicula molestie
imperdiet.
|---------- 200px ----------+------ 100% - 200px ------|
|-------------------------->| left margin
|<--------------------------| negative text indent
Is there a trick to do this the other way round:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vehicula molestie
imperdiet.
|------ 100% - 200px ------+---------- 200px ----------|
What I want is the first line (and only the first line) of text to extend 200px past the left edge. Perhaps there is a similar CSS property which applies indenting around the right edge or applies to 2nd and latter lines of text.
Here is a jsFiddle
text-indent could come from parent. with a padding.
http://jsfiddle.net/qsDST/
#wrapper {
width: 300px;
text-indent: -200px;
padding-left:200px;
}
h1 {
background: lime;
display:inline;
}
Is this you want?
h1.other-way-round {
margin-left: 0px;
text-indent:0px
}
DEMO
Second method
h1.other-way-round{
text-indent:0;
position:relative;
width:100%;
left:-200px;
}
DEMO
As I undarstand your expected result is something like this:
Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Mauris vehicula
molestie imperdiet.
The easiest way to do this might be using Javascript.
You could detect the 2nd and past lines and wrap an tag around them with a padding-right of 200px.
You may need to use jQuery or simmilar to do this.
Badly it's not possible to set width/height nor padding to the :first-line pseudoelement.