This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
I am trying to understand why this does not work the way I imagine. I can find workarounds but see above my question.
.content {
display: flex;
height: 700px;
background: linear-gradient(95deg, rgba(255, 255, 255, 1) 50%, rgba(26, 26, 26, 1) 50%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.center {
width: 100px;
height: 100%;
}
.left {
padding: 60px 60px 60px 130px;
}
.right {
padding: 60px 130px 60px 60px;
color: white;
}
<div class="content">
<div class="left">
<h1>Sports Car</h1>
<h2> What is a sports car? A car may be a sporting automobile without being a sports car.</h2>
<p>A sports car, or sportscar, is a small, usually two-seater, two-door automobile designed for spirited performance and nimble handling. The term "sports car" was used in The Times, London in 1919. According to USA's Merriam-Webster dictionary, USA's
first known use of the term was in 1928. Sports cars started to become popular during the 1920s.
<br> Sports cars may be spartan or luxurious, but high maneuverability and light weight are requisite. Sports cars are usually aerodynamically shaped (since the 1950s), and have a low center of gravity compared to standard models. Steering and suspension
are typically designed for precise control at high speeds.Traditionally sports cars were open roadsters, but closed coupés also started to become popular during the 1930s, and the distinction between a sports car and a grand tourer is not absolute.
</p>
</div>
<div class="center"> </div>
<div class="right">
<h1>Seating Layout</h1>
<h2> Traditional sports cars were typically two-seat roadsters.</h2>
<p>Although the first sports cars were derived from fast tourers, and early sporting regulations often demanded four seats (even three-seaters were often produced by coachbuilders), two seats became common from about the mid-1920s. Modern sports cars
may also have small back seats that are often really only suitable for luggage or small children; such a configuration is referred to as a 2+2 (two full seats + two "occasional" seats).
<br> Over the years, some manufacturers of sports cars have sought to increase the practicality of their vehicles by increasing the seating room. One method is to place the driver's seat in the center of the car, which allows two full-sized passenger
seats on each side and slightly behind the driver. The arrangement was originally considered for the Lamborghini Miura, but abandoned as impractical because of the difficulty for the driver to enter/exit the vehicle. McLaren used the design in their
F1.
</p>
</div>
</div>
When I run it on my screen, my inspector shows my middlebox to only be about 15px, although I defined it to be 100px in my CSS. Why is that? Then, How would you make it a priority to have a box (in my case the middle one) of the desired size vs the other ones squeezing it?
This is because your container div is using display: flex, so your components 'flex' depending on their contents and the other elements in the container.
You can fix it by either setting the min-width instead of width of the center div to 100px, or setting flex-shrink: 0; on the center class.
This:
.center {
min-width: 100px;
height: 100%;
}
or this:
.center {
width: 100px;
height: 100%;
flex-shrink: 0;
}
More information on flex box: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
I am trying to create a simple landing page with a background image and a lot of text on it. The problem I have is that the text overflows the image and you can't see all the text. How do I make it so the text fits and is readable to the user?
<div class="bgimg">
<div class="topleft">
<p>Logo</p>
</div>
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p>A week ago a friend invited a couple of other couples over for dinner. Eventually, the food (but not the wine) was cleared off the table for what turned out to be some fierce Scrabbling. Heeding the strategy of going for the shorter, more valuable word over the longer cheaper word, our final play was “Bon,” which–as luck would have it!–happens to be a Japanese Buddhist festival, and not, as I had originally asserted while laying the tiles on the board, one half of a chocolate-covered cherry treat. Anyway, the strategy worked. My team only lost by 53 points instead of 58.
Just the day before, our host had written of the challenges of writing short. In journalism–my friend’s chosen trade, and mostly my own, too–Mark Twain’s observation undoubtedly applies: “I didn’t have time to write a short letter, so I wrote a long one instead.” The principle holds across genres, in letters, reporting, and other writing. It’s harder to be concise than to blather. (Full disclosure, this blog post will clock in at a blather-esque 803 words.) Good writing is boiled down, not baked full of air like a souffl??. No matter how yummy souffl??s may be. Which they are. Yummy like a Grisham novel.
Lately, I’ve been noticing how my sentences have a tendency to keep going when I write them onscreen. This goes for concentrated writing as well as correspondence. (Twain probably believed that correspondence, in an ideal world, also demands concentration. But he never used email.) Last week I caught myself packing four conjunctions into a three-line sentence in an email. That’s inexcusable. Since then, I have tried to eschew conjunctions whenever possible. Gone are the commas, the and’s, but’s, and so’s; in are staccato declaratives. Better to read like bad Hemingway than bad Faulkner.
Length–as we all know, and for lack of a more original or effective way of saying it–matters. But (ahem), it’s also a matter of how you use it. Style and length are technically two different things.
Try putting some prose onscreen, though, and they mix themselves up pretty quickly. This has much to do with the time constraints we claim to feel in the digital age. We don’t have time to compose letters and post them anymore–much less pay postage, what with all the banks kinda-sorta losing our money these days–so we blast a few emails. We don’t have time to talk, so we text. We don’t have time to text to specific people, so we update our Facebook status. We don’t have time to write essays, so we blog.
I’m less interested by the superficial reduction of words–i.e. the always charming imho or c u l8r–than the genres in which those communications occur: blogs, texts, tweets, emails. All these interstitial communiques, do they really reflect super brevity that would make Twain proud? Or do they just reflect poorly stylized writing that desperately seeks a clearer form?
I rather think the latter. Clive Thompson wrote last month in the NYT Magazine that constant digital updates, after a day, can begin “to feel like a short story; follow it for a month, and it’s a novel.” He was right to see the bits as part of a larger whole. The words now flying through our digital pipes & ether more or less tend to resemble parts of bigger units, perhaps even familiar genres. But stories and novels have definite conclusions; they also have conventional lengths. Quick, how long is the conventional blog, when you add up all of its posts and comments? How long is the longest email thread you send back and forth on a single topic?
Most important: What exactly are we writing when we’re doing all of this writing? I won’t pretend to coin a whole new term here; I still think the best we can muster is a more fitting analogue. And if we must find an analogue in an existing literary unit, I propose the paragraph. Our constant writing has begun to feel like a neverending digital paragraph. Not a tight, stabbing paragraph from The Sun Also Rises or even a graceful, sometimes-slinking, sometimes-soaring paragraph from Absalom! Absalom!, I mean a convoluted, haphazard, meandering paragraph, something like Kerouac’s original draft of On the Road–only taped together by bytes. And 1 percent as interesting.
Paragraphs, particularly those that wrap from one page to the next, inherently possess a necessary suspension that tightens the reader’s focus yet breaks down the narrative into digestable sections. Just like emails or blogs or texts. The mental questions while reading all of these feel the same:
“Is this the last line or is there more?”
“Is the writer really trying to say something here, or just setting up a larger point?”
“Does this part have the information I’m looking for?”</p>
</div>
<div class="bottomleft">
<p>Some text</p>
</div>
</div>
I know it is a lot of text but that isn't the important part. The important part is to make it so the user can see it all.
My css:
body, html {
height: 100%
}
.bgimg {
/* Background image */
background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
/* Full-screen */
height: 100%;
/* Center the background image */
background-position: center;
/* Scale and zoom in the image */
background-size: cover;
/* Add position: relative to enable absolutely positioned elements inside the image (place text) */
position: relative;
/* Add a white text color to all elements inside the .bgimg container */
color: white;
/* Add a font */
font-family: "Courier New", Courier, monospace;
/* Set the font-size to 25 pixels */
font-size: 25px;
}
/* Position text in the top-left corner */
.topleft {
position: absolute;
top: 0;
left: 16px;
}
/* Position text in the bottom-left corner */
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
/* Position text in the middle */
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the <hr> element */
hr {
margin: auto;
width: 40%;
}```
https://jsfiddle.net/9136cgvo/
You need to play with the overflow of your parent div. Here is the jsfiddle for it, I also changed your position: absolute to fixed so that they stay at the same place even if you scroll.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.bgimg {
background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 20px;
overflow-x: scroll;
}
.topleft {
position: fixed;
top: 0;
left: 16px;
}
.bottomleft {
position: fixed;
bottom: 0;
left: 16px;
}
.middle {
position: absolute;
top: 4em;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
<div class="bgimg">
<div class="topleft">
<p>Logo</p>
</div>
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p>A week ago a friend invited a couple of other couples over for dinner. Eventually, the food (but not the wine) was cleared off the table for what turned out to be some fierce Scrabbling. Heeding the strategy of going for the shorter, more valuable word over the longer cheaper word, our final play was “Bon,” which–as luck would have it!–happens to be a Japanese Buddhist festival, and not, as I had originally asserted while laying the tiles on the board, one half of a chocolate-covered cherry treat. Anyway, the strategy worked. My team only lost by 53 points instead of 58.
Just the day before, our host had written of the challenges of writing short. In journalism–my friend’s chosen trade, and mostly my own, too–Mark Twain’s observation undoubtedly applies: “I didn’t have time to write a short letter, so I wrote a long one instead.” The principle holds across genres, in letters, reporting, and other writing. It’s harder to be concise than to blather. (Full disclosure, this blog post will clock in at a blather-esque 803 words.) Good writing is boiled down, not baked full of air like a souffl??. No matter how yummy souffl??s may be. Which they are. Yummy like a Grisham novel.
Lately, I’ve been noticing how my sentences have a tendency to keep going when I write them onscreen. This goes for concentrated writing as well as correspondence. (Twain probably believed that correspondence, in an ideal world, also demands concentration. But he never used email.) Last week I caught myself packing four conjunctions into a three-line sentence in an email. That’s inexcusable. Since then, I have tried to eschew conjunctions whenever possible. Gone are the commas, the and’s, but’s, and so’s; in are staccato declaratives. Better to read like bad Hemingway than bad Faulkner.
Length–as we all know, and for lack of a more original or effective way of saying it–matters. But (ahem), it’s also a matter of how you use it. Style and length are technically two different things.
Try putting some prose onscreen, though, and they mix themselves up pretty quickly. This has much to do with the time constraints we claim to feel in the digital age. We don’t have time to compose letters and post them anymore–much less pay postage, what with all the banks kinda-sorta losing our money these days–so we blast a few emails. We don’t have time to talk, so we text. We don’t have time to text to specific people, so we update our Facebook status. We don’t have time to write essays, so we blog.
I’m less interested by the superficial reduction of words–i.e. the always charming imho or c u l8r–than the genres in which those communications occur: blogs, texts, tweets, emails. All these interstitial communiques, do they really reflect super brevity that would make Twain proud? Or do they just reflect poorly stylized writing that desperately seeks a clearer form?
I rather think the latter. Clive Thompson wrote last month in the NYT Magazine that constant digital updates, after a day, can begin “to feel like a short story; follow it for a month, and it’s a novel.” He was right to see the bits as part of a larger whole. The words now flying through our digital pipes & ether more or less tend to resemble parts of bigger units, perhaps even familiar genres. But stories and novels have definite conclusions; they also have conventional lengths. Quick, how long is the conventional blog, when you add up all of its posts and comments? How long is the longest email thread you send back and forth on a single topic?
Most important: What exactly are we writing when we’re doing all of this writing? I won’t pretend to coin a whole new term here; I still think the best we can muster is a more fitting analogue. And if we must find an analogue in an existing literary unit, I propose the paragraph. Our constant writing has begun to feel like a neverending digital paragraph. Not a tight, stabbing paragraph from The Sun Also Rises or even a graceful, sometimes-slinking, sometimes-soaring paragraph from Absalom! Absalom!, I mean a convoluted, haphazard, meandering paragraph, something like Kerouac’s original draft of On the Road–only taped together by bytes. And 1 percent as interesting.
Paragraphs, particularly those that wrap from one page to the next, inherently possess a necessary suspension that tightens the reader’s focus yet breaks down the narrative into digestable sections. Just like emails or blogs or texts. The mental questions while reading all of these feel the same:
“Is this the last line or is there more?”
“Is the writer really trying to say something here, or just setting up a larger point?”
“Does this part have the information I’m looking for?”</p>
</div>
<div class="bottomleft">
<p>Some text</p>
</div>
</div>
This is code from a jekyll blog but I use CSS from an external CSS file to determine its styling. How do I make the following image become a full background image like those on medium posts?
The code is for this [webpage][1] and the images in the post.
HTML
img {
max-width: 100%;
font-style: italic;
vertical-align: middle;
border: 0;
}
<p><img src="http://tanaka.co.zw/images/posts/fowlplague.gif" alt="Fowl plague"></p>
<p>This article has left me most thoughtful about my present and future. It and other readings I will cite at the bottom will examine an issue of interest to me, and perhaps to all of us in many ways. Share your thoughts with me.
Outbreak: Our Next Global Pandemic
In May of 1997, a boy in Hong Kong is diagnosed with a new form of influenza- H5- he was dead within days. Within months, the Chinese government had ordered the slaughter of 1.2 million birds to curb the spread of the outbreak.
Epidemics and pandemics have historically been the greatest existential dangers our species has faced. We spend trillions on defense but [war and violence](https://ourworldindata.org/slides/war-and-violence/#/title-slide) has really killed just 167 million to 188 million in the last century.</p>
<img src="http://tanaka.co.zw/images/posts/democracy.png" alt="The History of Conflict">
Try to use
img{
width: 100%;
// or min-width
min-width:100%;
// or viewwidth
width: 100vw;
}
I'm trying to restrict each header and paragraph to only be apart of one column instead of auto formatting to go to the next column when it runs out of room.
.columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.div1 {
width: 100%;
padding: 10px;
border-right: 2px solid;
border-left: 2px solid;
margin: 0;
background-color: white;
}
<div class="div1">
<div class="columns">
<h4>Landscaping</h4>
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>
<h4>Services</h4>
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day. If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>
<h4>Mission</h4>
<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
</div>
</div>
Set a display: inline-block to each <p> element. This way, they will be self-contained in their respective column. But please bear in mind that this will not prevent the header from spilling to other columns, as seen in this image:
But, if you can wrap each header-column pair with a <div>, then you will just have to apply the display: inline-block; to that container, as seen in this image:
Or, as torazaburo pointed out, you could use break-inside: avoid; to prevent the splitting of the element. I'm used to using display: inline-block as it also trims unwanted size from the elements and make them easier to manage (in this case, it even make sense to have them like that as you are declaring a column layout), but the other property provides the exact same feature for your specific case.
Use the break-inside: avoid; CSS property.
.columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.div1 {
width: 100%;
padding: 10px;
border-right: 2px solid;
border-left: 2px solid;
margin: 0;
background-color: white;
}
/* USE THIS CLASS ON A DIV SURROUNDING THE HEADER AND CONTENT */
.nobreak {
break-inside: avoid;
}
<div class="div1">
<div class="columns">
<div class="nobreak">
<h4>Landscaping</h4>
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>
</div>
<div class="nobreak">
<h4>Services</h4>
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day. If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>
</div>
<div class="nobreak">
<h4>Mission</h4>
<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
</div>
</div>
</div>
I need to get my text to fit around my div on the this page.
<div id="othermain">
Is your big day approaching? Need a Wedding Dress, Bridesmaid Dress or any Bridal Wear altering or remodelling? You are definitely looking in the right place, this is our speciality! </p><br><br> At Bobbin Alterations,
we want to make sure that your dress is the perfect fit and style for you, for your special occasion. whether it be a Wedding, Prom, a dinner or any other special occasion. We understand that planning you're
big celebration can be very demanding at times, but we're here to take your worries away and make it as stress free as possible.<br><br> Looking good and comfortability is crucial, and with our help, we can tailor and alter a dress the highlights your features and make you feel wonderful.
<div id="testimonial"></div>
<br><br>Our standard dress alterations include:<br>
<br> - Shortening
<br> - Seams
<br> - Hemlines
<br> - Beading
<br> - Shoulder Adjustments
<br> - Straps
<br> - Veils
<br> - Zips<br>
<br>We've had the privilege of helping with endless amounts of weddings and proms and take extreme pride in the happiness that is made through our work.<br>
<br><br>Use the Order form to place an order, or call us on 01325 59976 with an Enquiry, to guarantee a First Class service and a truly memorable occasion.
</div>
Above is my code for bridal.html and below is my css code for the two elements in question:
#testimonial{background: url(../img/testimonial.fw.png); width: 700px; height: 300px; margin-left:320px; display: block; background-repeat:no-repeat;}
#ordermain {width:1024px; height: 700px}
All help is greatly appreciated. I have tried numerous methods. THanks
Remove the left margin and make the div float right.
#testimonial{
background: url(../img/testimonial.fw.png);
width: 700px;
height: 300px;
display: block;
background-repeat: no-repeat;
float: right;
}