Related
This HTML:
<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; margin-top: 0; margin-right: 0">
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 400px; height: auto">
<figcaption style="caption-side: bottom; display: table-caption">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>
<p>Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen.</p>
It renders correctly:
However, if you change the style width to 25% like this:
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 25%; height: auto">
It renders incorrectly:
The floated figure no longer appears to the right of the paragraph text. Instead, it appears above the paragraph text.
My questions are:
Why does it do this?
Is there a way to make any style width unit and value work while getting the same layout/render?
JSFiddle: https://jsfiddle.net/jbx3htfs/
The issue is caused because you apply the 15% at the wrong spot. If you use 25% on the image then the image will fill 25% of the parent's width (figure). You have to apply the width to the figure element and then give the image a width of 100%:
<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; margin-top: 0; margin-right: 0; width: 25%">
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 100%; height: auto">
<figcaption style="caption-side: bottom; display: table-caption">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>
<p>Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen.</p>
<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; width: 50%">
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 90%; height: auto;">
<figcaption style="caption-side: bottom; display: table-caption;">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>
<p >Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen.</p>
Because figure occupies all 100% of present width before <p> gets to do so.
So you need to be precise with figure's width and declare it as well like here:
https://jsfiddle.net/6o51tzqn/
if there is no long text in "main_body" div,height of "main_body" div is equal to it's parent.but if i put long text,the height of "main_body" div is not the same height as it's parent.
html
<body>
<div class="main_body">
<div class="i_m_nothing">
</div>
Hello, everyone! This is the LONGEST TEXT EVER! I was inspired by the various other "longest texts ever" on the internet, and I wanted to make my own. So here it is! This is going to be a WORLD RECORD! This is actually my third attempt at doing this. The first time, I didn't save it. The second time, the Neocities editor crashed. Now I'm writing this in Notepad, then copying it into the Neocities editor instead of typing it directly in the Neocities editor to avoid crashing. It sucks that my past two attempts are gone now. Those actually got pretty long. Not the longest, but still pretty long. I hope this one won't get lost somehow. Anyways, let's talk about WAFFLES! I like waffles. Waffles are cool. Waffles is a funny word. There's a Teen Titans Go episode called "Waffles" where the word "Waffles" is said a hundred-something times. It's pretty annoying. There's also a Teen Titans Go episode about Pig Latin. Don't know what Pig Latin is? It's a language where you take all the consonants before the first vowel, move them to the end, and add '-ay' to the end. If the word begins with a vowel, you just add '-way' to the end. For example, "Waffles" becomes "Afflesway". I've been speaking Pig Latin fluently since the fourth grade, so it surprised me when I saw the episode for the first time. I speak Pig Latin with my sister sometimes. It's pretty fun. I like speaking it in public so that everyone around us gets confused. That's never actually happened before, but if it ever does, 'twill be pretty funny. By the way, "'twill" is a word I invented recently, and it's a contraction of "it will". I really hope it gains popularity in the near future, because "'twill" is WAY more fun than saying "it'll". "It'll" is too boring. Nobody likes boring. This is nowhere near being the longest text ever, but eventually it will be! I might still be writing this a decade later, who knows? But right now, it's not very long. But I'll just keep writing until it is the longest! Have you ever heard the song "Dau Dau" by Awesome Scampis? It's an amazing song. Look it up on YouTube! I play that song all the time around my sister! It drives her crazy, and I love it. Another way I like driving my sister crazy is by speaking my own made up language to her. She hates the languages I make! The only language that we both speak besides English is Pig Latin. I think you already knew that. Whatever. I think I'm gonna go for now. Bye! Hi, I'm back
</div>
</body>
CSS
.html,body {
height: 100%;
background-color:blue;
margin: 0;
}
.main_body {
height: 100%;
background: yellow;
}
.i_m_nothing{
height:50%;
width:50%;
background-color:red;
}
the quick solution that i found by myself was :
Css
.main_body {
height: 100%;
background: yellow;
position:fixed;
overflow-y:auto;
}
But This solution isn't the solution which i want.
here you can run my html and css on code pen : you can uncomment some css inside .main_body to know the result which i want.
you can try this code
.main_body {
min-height: 100vh;
background: yellow;
}
The main-div has exactly the same height as the body - look in your browser's dev tools and you will see that the computed heights of both are the same and they are the height of the viewport.
Now, you can scroll down through the contents of main-div because you haven't said you don't want that to be possible.
If you want the text cut off so it's not viewable you can set overflow-y: hidden on the main-div.
UPDATE: Initially I had misunderstood what was required. The subsequently provided code which showed a 'solution' using position:fixed demonstrated what the visual outcome was to be - (but was required without the fixed).
Although the main-div and the body do have the same height using the code given in the question, and that can be verified by looking at the computed height in the browser's dev tools, the problem lies in the initial setting of body height at 100%.
100% of what? As the long text and the red div are within the main-div which is itself within the body they expand in height because the height is not fixed.
Giving the html element a height of 100vh means the body height at 100% also is 100vh as is main-div and the red box is 50% of this height.
The treatment of background-color on the html and body elements differs a bit from 'normal' elements. If html doesn't have a background set then it takes on the background of body and covers the whole page. See discussion of this at Applying a background to <html> and/or <body>. So in this instance if we run the code without an html element we lack some blue at the bottom.
(Side note: when running code in SO's snippet system or codepen etc they tend to put in html and body elements if they aren't already there so the demos sometimes seem to 'work' while the pure code given without these doesn't).
Here's the snippet with initial height set.
html {
height: 100vh;
}
body {
height: 100%;
background-color: blue;
margin: 0;
}
.main_body {
height: 100%;
background: yellow;
}
.i_m_nothing {
height: 50%;
width: 50%;
background-color: red;
}
<body>
<div class="main_body">
<div class="i_m_nothing">
</div>
Hello, everyone! This is the LONGEST TEXT EVER! I was inspired by the various other "longest texts ever" on the internet, and I wanted to make my own. So here it is! This is going to be a WORLD RECORD! This is actually my third attempt at doing this.
The first time, I didn't save it. The second time, the Neocities editor crashed. Now I'm writing this in Notepad, then copying it into the Neocities editor instead of typing it directly in the Neocities editor to avoid crashing. It sucks that my past
two attempts are gone now. Those actually got pretty long. Not the longest, but still pretty long. I hope this one won't get lost somehow. Anyways, let's talk about WAFFLES! I like waffles. Waffles are cool. Waffles is a funny word. There's a Teen
Titans Go episode called "Waffles" where the word "Waffles" is said a hundred-something times. It's pretty annoying. There's also a Teen Titans Go episode about Pig Latin. Don't know what Pig Latin is? It's a language where you take all the consonants
before the first vowel, move them to the end, and add '-ay' to the end. If the word begins with a vowel, you just add '-way' to the end. For example, "Waffles" becomes "Afflesway". I've been speaking Pig Latin fluently since the fourth grade, so it
surprised me when I saw the episode for the first time. I speak Pig Latin with my sister sometimes. It's pretty fun. I like speaking it in public so that everyone around us gets confused. That's never actually happened before, but if it ever does,
'twill be pretty funny. By the way, "'twill" is a word I invented recently, and it's a contraction of "it will". I really hope it gains popularity in the near future, because "'twill" is WAY more fun than saying "it'll". "It'll" is too boring. Nobody
likes boring. This is nowhere near being the longest text ever, but eventually it will be! I might still be writing this a decade later, who knows? But right now, it's not very long. But I'll just keep writing until it is the longest! Have you ever
heard the song "Dau Dau" by Awesome Scampis? It's an amazing song. Look it up on YouTube! I play that song all the time around my sister! It drives her crazy, and I love it. Another way I like driving my sister crazy is by speaking my own made up
language to her. She hates the languages I make! The only language that we both speak besides English is Pig Latin. I think you already knew that. Whatever. I think I'm gonna go for now. Bye! Hi, I'm back
</div>
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>
I'm working with a basic 3-column layout, using HTML and CSS. My columns float left, so when I resize the width of the window, the columns gradually "collapse". i.e. First, col-3 will collapse under col-1, then col-2 will collapse under col-1.
HTML:
<div id="col2">
<p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. Market-facing drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p>
</div>
<div id="col3">
<p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p>
</div>
CSS:
body {
width: 90%;
max-width: 1000px;
margin: 0 auto; }
#col1, #col2, #col3 {
float: left;
width: 30%;
margin: 10px;
min-width: 200px; }
What I would like to happen is this. At a specified width, the 3 columns will collapse directly into 1 column (col1 above col2 above col3), instead of them moving one at a time.
Can this be done with HTML & CSS, or is another language required? How do I accomplish this?
You can use
body {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
#col1, #col2, #col3 {
float: left;
width: 30%;
margin: 10px;
min-width: 200px;
}
#media (max-width: 768px) { /*set here you specified width*/
#col1, #col2, #col3 {
width: 100%;
}
}
<div id="col3">
<p>3333We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whle swamp.</p>
</div>
<div id="col2">
<p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. Market-facing drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p>
</div>
<div id="col3">
<p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p>
</div>
Here a jsfiddle example to play with
If the content inside your div#col is really text, not just an example I really recommend you use: CSS3 Multiple Columns
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;
}