I have a two-column layout. The main text on the left, and a sidebar on the right (float: right; width: 30%).
On small browsers, I'd like to first show the main text, and then the sidebar. But if I remove the float from the sidebar with a media query, it shows up first.
I don't want to make the main text another float, because I want it to wrap around the sidebar if the text is long and the sidebar short.
I'm looking for something that's not Javascript if possible.
CSS order Property
When in mobile screen size:
Make the containing tag a flex-container (column wise)
Remove the float related properties from sidebar
Apply order property to the content tag (element with text) and sidebar
The number value of the order property belonging to content tag should be less than the order value of sidebar.
The following demo features:
600px+ Width
Container - <article>
Sidebar - <aside>
float: right
clearfix hack - article::after {...}
Content - <p class="content">
600px Max Width (Mobile)
Container - <article>
flex-container (column)
Sidebar - <aside>
float: none
clearfix hack - removed
order: 3
Content - <p class="content">
order: 2
Demo
Note: View demo in full page mode not in the initial iframe. Resize the window to see the media query work.
:root {
font: 400 3vw/6vh Arial
}
html,
body {
width: 100%;
height: 100%;
padding: 1vh 1vw;
}
main {
width: 90vw;
height: auto;
margin: 5vh -6vw 10vh -6vw;
padding: 3vh 15vw 5vh 5vw;
}
section {
width: 100%;
height: 100%;
}
/*
Begin Sidebar Rulesets
*/
aside {
float: right;
width: 30%;
height: 50%;
border: 3px ridge grey;
margin-left: 3vw;
padding: 5vh 1vw 5vh 2vw;
}
/*
Clearfix hack
*/
aside::after {
content: "";
clear: both;
display: table;
}
/*
End Sidebar Rulesets
*/
header,
footer {
padding: 2vh 0 2vh 0;
margin: 2vh 0;
line-height: 8vh;
}
header {
border-bottom: 5px ridge grey;
}
footer {
border-top: 5px ridge grey
}
h1 {
font-size: 1.75rem;
letter-spacing: 1vw;
margin: 0 0 3vh;
}
h2 {
font-size: 1.45rem;
letter-spacing: 0.75vw;
margin: 0 0 3vh;
}
h3 {
font-size: 1.2rem;
letter-spacing: 0.5vw;
margin: 0 0 3vh;
}
address {
float: right;
font-size: 0.85rem;
margin: 2vh 1vw 5vh 3vw
}
ul {
list-style: none;
padding-left: 1vw
}
li {
margin-bottom: 2vh
}
.content {
font-size: 0.9rem;
line-height: 7vh;
}
/*
Begin Mobile Media Queries
*/
/*
Remove float properties from sidebar (aside)
Convert container (article) into a flex container
Use order property to rearrange how the flex-items appear
(header, p.content, aside)
*/
#media screen and (max-width: 600px) {
article {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
article>header {
order: 1;
}
.content {
order: 2;
}
aside {
float: none;
width: 100%;
order: 3
}
aside::after {
content: none;
}
}
/*
End Mobile Media Queries
*/
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<!-- <link> tags go here -->
<style>
/* CSS Rulesets go here */
</style>
</head>
<body>
<main>
<section>
<header>
<h1>Main Title</h1>
</header>
<!-- Begin Container -->
<article>
<header>
<h2>Topic Title</h2>
</header>
<!-- Begin Sidebar -->
<aside>
<nav>
<header>
<h3>Sidebar Title</h3>
</header>
<hr>
<ul>
<li>
<a href='#/'>Link</a>
</li>
<li>
<a href='#/'>Link</a>
</li>
<li>
<a href='#/'>Link</a>
</li>
</ul>
</nav>
</aside>
<!-- End Sidebar -->
<!-- Begin Content -->
<p class='content'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus</p>
<!-- End Content -->
</article>
<!-- End Container -->
<footer>
<address>
123 Main St.<br>
Springfield, IL 12345<br>
admin#mail.com
</address>
</footer>
</section>
</main>
</body>
</html>
First Solution using float on Desktop and using flex-direction on mobile Will give the result you want.
.sidebar {
float: right;
border: 1px solid;
width: 200px;
}
#media (max-width:767px) {
p,
.sidebar {
float: none;
width: auto;
}
.main {
display: flex;
width: 100%;
flex-direction: column-reverse;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="main">
<div class="sidebar"> <h1>Side bar</h1>
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
Helping Credits goes to #zer00ne
Second Solution if not using text to wrap under sidebar Using flex we can achieve this. As it has many advantages of playing with its properties without changing HTML structure and its more mature then float
.flex-container {
display: flex;
flex-direction: column;
}
.main {
width: 100%;
order: 1;
padding: 0 1em;
}
.sidebar-aside {
width: 100%;
order: 2;
padding: 0 1em;
background-color: #cff;
}
#media (min-width: 40em) {
.flex-container {
flex-direction: row;
}
.main {
flex: 1;
order: 1;
}
.sidebar-aside {
width: 15em;
order: 2;
}
}
<div class="flex-container">
<main class="main">
<article>
<h1>Main Title</h1>
<p>Some Content to fill the page.</p>
<h2 id="topic-1">Topic 1</h2>
<p>Info</p>
<h2 id="topic-2">Topic 2</h2>
<p>Info</p>
<h2 id="topic-3">Topic 3</h2>
<p>Info</p>
</article>
</main>
<aside class="sidebar-aside">
<h3>Side Bar</h3>
<h4>Sidebar Title</h4>
<p>Lorem epsum text is a dummy text</p>
</aside>
</div>
You can change the order on different screens that which div comes
first
It can be achieved using css grid
/* Here 2fr for main text and 1fr for side bar */
grid-template-columns: 2fr 1fr;
For screen size 600px or less
/* For mobile devices, it will be 1/1 grid */
grid-template-columns: 1fr;
*{
padding: 0;
margin: 0;
}
.container{
background: #f2f2f2;
padding: 10px;
height: 100vh;
}
.layout{
display: grid;
/* Actual style width 2 grid layout */
grid-template-columns: 2fr 1fr;
padding:5px;
}
.main-text{
padding: 20px;
}
.side-bar{
border: 2px solid #444;
}
/* For mobile devices with 1f 1/1 grid */
#media (max-width:600px){
.layout{
grid-template-columns:1fr;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<h3>Resize screen for responsive</h3>
<div class="layout">
<div class="main-text">
<h2>Main text</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices mollis cursus. Vestibulum aliquam, lorem quis porta sodales, diam mi tincidunt quam, vitae consequat erat neque in turpis. Nam massa libero, feugiat ut laoreet eu, interdum et erat. Morbi quis suscipit nunc, blandit congue sapien. Aenean faucibus nisi sit amet quam interdum, eget mollis enim rutrum. Etiam viverra vel magna quis rutrum. Maecenas ipsum urna, feugiat sed sagittis id, vehicula eu enim. Ut commodo odio vitae nibh posuere blandit. Nunc aliquam metus vitae vehicula tempus. Vivamus semper pharetra felis mollis pellentesque. Vestibulum quis velit feugiat, blandit tortor a, mattis turpis. Mauris varius nisl id ultricies tempus. Vivamus imperdiet euismod pellentesque. Nullam pretium elit id semper convallis.
</div>
<div class="side-bar">
<h2>Side bar</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices mollis cursus. Vestibulum aliquam, lorem quis porta sodales, diam mi tincidunt quam, vitae consequat erat neque in turpis. Nam massa libero, feugiat ut laoreet eu, interdum et erat. Morbi quis suscipit nunc, blandit congue sapien. Aenean faucibus nisi sit amet quam interdum, eget mollis enim rutrum. Etiam viverra vel magna quis rutrum.
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
body {
font-family: sans-serif;
}
.app {
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-text {
flex-basis: 70%;
background-color: #ddd;
min-height: 200px;
}
.sidebar {
flex-basis: 30%;
background-color: #1a1a1a;
color: white;
min-height: 100px;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
.app {
flex-wrap: wrap;
}
.main-text {
flex-basis: 100%;
}
.sidebar {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="app" id="app">
<div class="main-text">
Main Text
</div>
<div class="sidebar">
SideBar
</div>
</div>
</body>
</html>
simple solution using flexbox, no javascript involved
class main-text and sidebar refer to respective components
height and background colors are added just for the visual effect,they are not necessary for the solution to work
Flexbox solution:
html:
<div class='content'>
<div class='main'><p> lorem ipsu... </p></div>
<div class='sidebar'><p> lorem ipsu ... </p></div>
</div>
css:
.container{
display: flex;
flex-wrap: wrap;
}
.main{
order: 1;
width:70%;
}
.sidebar{
order:2;
width:30%;
}
#media (max-width:600px){
.main{
width:100%;
}
}
Idea is that the main simply takes up the full width, forcing the sidebar down below it.
Related
I am trying to learn some React and CSS and I am struggling with one thing.
I am trying to create a chat page , but when there are many messages , the message - container pushes down the input box.
React code:
const message = useRef()
function submit(e) {
e.preventDefault();
addMessage(msgBox => [...msgBox , message.current.value])
}
const [msgBox, addMessage] = useState(["John: Hi"])
return (
<>
<div className = "chat-container">
{msgBox.map((msg) => {
return <div><span>{msg}</span><br/></div>
})}
</div>
<div className = "message-box">
<Form onSubmit = {submit}>
<input ref = {message} />
<Button type = "submit" className = "mb-1 position-fixed">
Send
</Button>
</Form>
</div>
</>
)
CSS :
* {
margin: 0;
padding: 0;
}
.chat-container {
min-height: 90vh;
min-width: 80%;
position: relative;
}
span {
padding: 60px;
}
.message-box {
min-height: 10vh;
position: absolute;
}
.message-box > form > input {
margin-left: 60px;
}
I tried to play around with the position properties, but I coudn't make it happen.I want the message-box to not be pushed down by chat-container when there are too many messages.
I want when there are too many messages the chat-container not to overlap at all the message-box and be able to scroll there.
Any help?
Set max-height on .chat-container. You can use another value instead of 500px. Play with it to find a value that matches your design.
.chat-container {
max-height: 500px
overflow: scroll
}
Update
If the height of the .chat-container changes and you want to push the input at the bottom, do this:
Give all the parent of the .chat-container including html and body height: 100%.
Put the .chat-container and form in a html element that is flex and its flex-direction is column.
Use flex-grow: 1 on the .chat-container so that it always takes all the available space.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-container {
flex-grow: 1;
overflow: scroll;
}
<div class="container">
<div class="chat-container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
</div>
<div class="message-box">
<Form onSubmit={ submit}>
<input ref={ message} />
<Button type="submit" class="mb-1 position-fixed">
Send
</Button>
</Form>
</div>
</div>
You can adjust the height of the form.
I just want to add a bit more to the solution, as the previous answers are quite poor, since whenever the viewport changes, the 500px value would not work. In this app case, we have:
The container with the chat messages, which should be scrollable and should have a fixed height.
The container with the input which would have the rest of the height.
I suppose you are designing an app like WhatsApp Web, so you would have something like the following:
Here is how the structure would look in HTML:
<div class="chat-wrapper">
<div class="chat-messages">
<div class="message left">Some text</div>
<div class="message left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla sem, placerat a est eu, interdum consectetur ipsum. Sed sed libero ac mauris scelerisque convallis et eget elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel iaculis purus. Nunc placerat nisi sapien, id facilisis sapien faucibus sit amet. Vestibulum felis eros, fermentum quis augue eu, vehicula dapibus nisi. Suspendisse potenti.</div>
<div class="message right">Some text</div>
<div class="message right">Some text</div>
<div class="message left">Some text</div>
<div class="message right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla sem, placerat a est eu, interdum consectetur ipsum. Sed sed libero ac mauris scelerisque convallis et eget elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel iaculis purus. Nunc placerat nisi sapien, id facilisis sapien faucibus sit amet. Vestibulum felis eros, fermentum quis augue eu, vehicula dapibus nisi. Suspendisse potenti.</div>
<div class="message left">Some text</div>
<div class="message right">Some text</div>
<div class="message right">Some text</div>
<div class="message left">Some text</div>
</div>
<div class="chat-input">
<input name="message" class="chat-input" />
</div>
</div>
Now, the window height would be the 100% of the height, which is the same as 100vh. From here, you can create a parent container, whose height would be the entire viewport:
.chat-wrapper {
height: 100vh;
width: 50%;
margin: auto;
}
The chat wrapper would be the class for the parent of the div containers of the messages. Then, we would define two more classes, that will be the containers for the div's of the messages and the input itself:
/* Container for the message */
.chat-messages {
padding: 16px 36px 0;
min-height: calc(100% - 75px);
max-height: calc(100% - 75px);
overflow: auto;
}
/* Container for the input */
.chat-input {
background-color: #efefef;
min-height: 75px;
max-height: 75px;
display: flex;
justify-content: flex-left;
align-items: center;
padding: 0 32px;
}
The trick here, is how we calculate the height of the messages. As you can see, we are using the 100% of the height, but we are also subtracting the fixed height of the input container. Therefore, the messages container will always push the input container to the bottom, without removing it from the actual viewport. Plus, we add the overflow: auto prop, which will allow the scrolling inside the container.
Finally, we can add other styling classes to the other fields.
/* Default styling for the messages */
.message {
padding: 8px;
border-radius: 8px;
width: fit-content;
max-width: 65%;
margin-bottom: 8px;
border: 1px solid #dedede;
}
/* Default styling for the right messages */
/* You could also modify the styled for the left messages with the left class */
.message.right {
background-color: #dcf8c6;
margin-left: auto;
}
.chat-input {
padding: 8px;
width: 100%;
height: 65%;
border-radius: 8px;
outline: none;
border: none;
}
I am making a website on the basis of a PSD file. I want to create the website using a flexbox layout.
I don't know how to make 4 columns in flexbox to be able to wrap nicely.
I want to make something like on the image:
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 100%;
}
.resources {
background-color: #a2ca28;
}
.info {
padding-top: 40px;
padding-bottom: 40px;
}
.info > * {
flex-basis: 20%;
padding: 20px;
}
.info article img {
height: 4em;
}
.info article h2 {
font-size: 24px;
font-weight: 400;
line-height: 54.1px;
}
.info article p {
font-family: "Proxima Nova";
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
<section class='resources'>
<div class='container info'>
<article>
<img src="./images/resources.png" >
<h2>Resources</h2>
<p>Donec porttitor augue sit amet est posuere facilisis. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Fusce malesuada ipsum augue, quis viverra orci ultricies
at. Etiam commodo purus nisi. Aenean vestibulum mi in mi consequat, vel semper orci efficitur.</p>
<a href='#'>Explore more</a>
</article>
<article>
<img src="./images/trainingfunding.png" >
<h2>Training & Funding </h2>
<p>Quisque vel ultrices elit. Phasellus nunc libero, dictum id purus a,
semper volutpat arcu. Integer pretium, tortor at facilisis sollicitudin,
ex velit faucibus dolor, ut finibus dolor neque at odio.</p>
<a href='#'>Explore more</a>
</article>
<article>
<img src="./images/connect.png" >
<h2>Connect</h2>
<p>Quisque quis nulla dignissim, consectetur libero sed, semper risus.
Quisque tincidunt, elit sit amet volutpat tincidunt, velit dolor
varius nisl, ut tristique orci diam et elit. Nam congue sem nunc,
ac fermentum leo consectetur in. </p>
<a href='#'>Explore more</a>
</article>
<article>
<img src="./images/communicate.png" >
<h2>Communicate</h2>
<p>Maecenas sit amet felis et leo consectetur efficitur.
Vestibulum gravida felis nec malesuada pulvinar.</p>
<a href='#'>Explore more</a>
</article>
</div>
</section>
Added/Updated the following styles
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 100%;
}
.container article {
width: 25%;
padding: 10px;
position: relative;
}
article a {
position: absolute;
bottom: 0;
}
#media (max-width: 900px) {
.container article {
width: 50%;
}
}
#media (max-width: 768px) {
.container article {
width: 100%;
}
}
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 100%;
}
.resources {
background-color: #a2ca28;
}
.info {
padding-top: 40px;
padding-bottom: 40px;
}
.container article {
width: 25%;
padding: 10px;
position: relative;
}
article a {
position: absolute;
bottom: 0;
}
.info article img {
height: 4em;
}
.info article h2 {
font-size: 24px;
font-weight: 400;
line-height: 54.1px;
}
.info article p {
font-family: "Proxima Nova";
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
#media (max-width: 900px) {
.container article {
width: 50%;
}
}
#media (max-width: 768px) {
.container article {
width: 100%;
}
}
<section class='resources'>
<div class='container info'>
<article>
<img src="./images/resources.png">
<h2>Resources</h2>
<p>Donec porttitor augue sit amet est posuere facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada ipsum augue, quis viverra orci ultricies at. Etiam commodo purus nisi. Aenean vestibulum
mi in mi consequat, vel semper orci efficitur.</p>
<a href='#'>Explore more</a>
</article>
<article>
<img src="./images/trainingfunding.png">
<h2>Training & Funding </h2>
<p>Quisque vel ultrices elit. Phasellus nunc libero, dictum id purus a, semper volutpat arcu. Integer pretium, tortor at facilisis sollicitudin, ex velit faucibus dolor, ut finibus dolor neque at odio.</p>
<a href='#'>Explore more</a>
</article>
<article>
<img src="./images/connect.png">
<h2>Connect</h2>
<p>Quisque quis nulla dignissim, consectetur libero sed, semper risus. Quisque tincidunt, elit sit amet volutpat tincidunt, velit dolor varius nisl, ut tristique orci diam et elit. Nam congue sem nunc, ac fermentum leo consectetur in. </p>
<a href='#'>Explore more</a>
</article>
<article>
<img src="./images/communicate.png">
<h2>Communicate</h2>
<p>Maecenas sit amet felis et leo consectetur efficitur. Vestibulum gravida felis nec malesuada pulvinar.</p>
<a href='#'>Explore more</a>
</article>
</div>
</section>
I want a CSS style for my html reports that should be nice to read: therefore body has a maximum width and is centered. I also want figures/img to be centered relatively to the page, when the image is wider than the container and when not it should also be centered.
I have tried some translateX stuff, and also tried the display: contents; option. I have failed using position: absolute;, because then the consecutive figures are vertically overlapping...
Example snippet below. How can I achieve the centering?
body {
background-color: #ebebeb;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
figure,
div.figure {
position: relative;
text-align: center;
border: 1px solid #44c;
padding: 2px;
left: 50%;
transform: translateX(-50%);
}
img {
background-color: #999;
padding: 2px;
}
<body>
<p>
Some text inside a paragraph that should not be too wide and centered in the page. bla bla bla blabla bla bla aaaaaaaaaaaaaaaaaa aaa aaaaa aaaaaaaaaaaaaaa aaa.
</p>
<figure>
<img width=500px src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg"></img>
</figure>
<p>
Some text below.
</p>
</body>
Like this?
note: you need to change max-width on .cont to make the center container grow bigger or smaller
body{
margin:0;
padding:0;
text-align:center;
vertical-align: top;
}
.cont{
text-align:center;
display: inline-block;
max-width:600px;
vertical-align: top;
}
figure{
display: inline-block;
margin:0;
vertical-align: top;
}
img{
max-width:100%;
vertical-align: top;
}
p{
box-sizing: border-box;
text-align:left;
padding:10px 5px;
vertical-align: top;
}
<div class="cont">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg" alt="">
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed vehicula erat. Proin odio nisi, fermentum ut nisi eu, laoreet rutrum leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet malesuada arcu. Cras ullamcorper enim justo, sed mattis velit ullamcorper a. Morbi ac egestas lectus. Ut sit amet maximus mauris, eget vehicula ligula. Phasellus sit amet odio gravida, tempus ipsum at, blandit odio. Morbi quis libero non metus ornare varius nec sed tellus. Aenean lacinia, dui vehicula ultrices scelerisque, ex odio viverra nunc, eget posuere tortor est faucibus dui. Aliquam vestibulum libero a auctor ultricies. Morbi sed eros odio. Phasellus molestie sit amet nisl at fermentum. Praesent est erat, tincidunt ut diam nec, molestie varius est. Duis purus libero, placerat sit amet nulla et, pharetra lobortis neque. Quisque quis risus ultricies, semper tellus sit amet, feugiat orci.
</p>
</div>
Alright, I found a concise CSS syntax for limiting the width of everything in <body> except <figure>, using the power of asterisks:
style all descendants of body but not body itself: body * {max-width: 200px;}
override max-width in figure only: figure {max-width: none !important;}
Make img inherit the max-width from the containing figure: img {max-width: inherit;}.
body {
background-color: #ebebeb;
}
body * {
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
figure {
text-align: center;
border: 1px solid #44c;
padding: 2px;
max-width: none !important;
}
img {
background-color: #999;
padding: 2px;
max-width: inherit;
}
<body>
<p>
Some text inside a paragraph that should not be too wide and centered in the page. bla bla bla blabla bla bla aaaaaaaaaaaaaaaaaa aaa aaaaa aaaaaaaaaaaaaaa aaa.
</p>
<figure>
<img width=500px src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg"></img>
</figure>
<p>
Some text below.
</p>
</body>
I'm having a problem with a flexbox layout inside an iframe. The layout works fine in a normal view, but once placed inside an iframe (like here in this snippet or codepen etc.), the flex children of the second flex column doesn't have equal heights anymore.
I can't really show you the difference, because all snippets are automatically placed in iframes...
*,
*::before,
*::after {
box-sizing: border-box;
}
.b-block {
margin: 0 auto;
max-width: 1000px;
padding: 10px;
}
.b-block__wrap {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -10px;
}
.b-block__item,
.b-block__item--large {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
display: flex;
flex-direction: column;
padding: 0 10px;
margin-bottom: 10px;
justify-content: space-between;
}
#media (min-width: 992px) {
.b-block__item,
.b-block__item--large {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 0;
}
}
.b-article,
.b-article--large {
display: flex;
flex: 1; /* works in a div but not in an iframe */
/* flex: 0 1 auto; // works but without equal heights */
padding: 10px;
font-size: 16px;
background: #eee;
}
.b-article:not(:last-child) {
margin-bottom: 10px;
}
.b-article--large {
min-height: 300px;
}
<section class="b-block">
<div class="b-block__wrap">
<div class="b-block__item--large">
<article class="b-article--large">Vivamus erat sit habitasse nisi quam penatibus proin nascetur hac volutpat porttitor ad condimentum mauris aenean fames lectus tincidunt inceptos
</article>
</div>
<div class="b-block__item">
<article class="b-article">Convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna.
</article>
<article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
</article>
<article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.
</article>
</div>
</div>
</section>
Is there any workaround for this?
I already tried:
• Wrapping the b-article in the second b-block__item in an extra div
• Setting the flex property of the b-article in the second b-block__item to flex: 0 1 33%;
but no luck yet.
Is this even possible in an iframe?
Thanks!
I have serious troubles with my css layout.
This is my workingbase: http://jsfiddle.net/UeVm8/1/
<div id="container">
<div id="header">
<h1>
Site name
</h1>
</div>
<div id="content">
<h2>
Page heading
</h2>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}
#container
{
position:relative;
margin: 0 auto;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}
#header
{
background:#ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#content
{
padding: 20px;
padding-bottom:50px;
}
#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}
The site should always be 100% height at minimum with small distances to top and bottom.
There shouldn't be scrollbars, except the content is too big. Then it should fit to the content and the distances to top and bottom should stay.
But when you resize the window, the padding at the bottom disappears!?!
I already tried different settings and found a solution for Firefox: http://jsfiddle.net/UeVm8/7/
But this solution does not work in Chrome and IE.
I am totally annoyed by this nasty inconsistence in the CSS implementations.
Does anybody know how to solve this issue for all (modern) browsers?
Thanks.
PS: It's an stylesheet only for desktops.
I finally found the answer! :)
As mentioned I already found a solution for Firefox, but it was not working on Chrome.
After some fiddling I also had a solution for Chrome, which wasn't working on Firefox.
I think the issue is that there seems to be a bug in Google Chrome.
But I could combine both solutions by just overwriting settings just for chrome with some special selector.
The CSS solution: http://jsfiddle.net/UeVm8/8/
html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}
#container
{
position:relative;
margin: 0px auto 20px;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#container{
margin: 0px auto 0px;
}
html, body{
overflow:auto;
}
}
#header
{
background:#ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#content
{
padding: 20px;
padding-bottom:50px;
color:grey;
}
#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}
I tested it on Firefox, Chrome, IE, Opera and Maxton and it worked.
Nevertheless CSS is a crazy chick.