alignment issue with div and image - css
I've the below html code with divs as column creators and separators, here when i run this in my web browser, it is creating an overlapping of data or the columns are not getting properly aligned. here actually i want a 3 column layout where in there would be an image in the first and second column top part. you can find the document how it should look like here and the fiddle Here. and also i don't want to use table here, just divs should do it. please let me know where am i going wrong.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.columns
{
width: 508.326px;
height:709.268px;
}
div.left {
width:341px;
height:709.268px;
border-right:dotted;
float: left;
}
div.right {
width:167px;
height:709.268px;
float: right;
margin-left: 10px;
}
div.white
{
width:188px;
float:left;
height:436.86px;
}
div.grey
{
width:188px;
float:right;
height:436.86px;
}
div.red
{
width:217px;
}
</style>
</head>
<body>
<div class="columns">
<div class="left">
<div class="image">
<img src="../Magazines/Images/Images.jpg" height="380" width="380"/>
</div>
<div class="white" >The English historian Lord Acton
famously said the “issue which has
swept down the centuries and which
will have to be fought sooner or later is
the people versus the banks”.
This cannot ring truer than now, with
many banks, particularly the biggest
ones, in the public spotlight facing
a wide range of investigations and
litigations, following the 2007-2008
global financial crisis. And as Mr.
Longo puts it, that is all just part of
doing business at the moment if you
are a financial institution such as
Deutsche Bank.
“Since the GFC (global financial
crisis), the industry has gone through
tremendous change on a variety of
fronts,” he tells Hong Kong Lawyer
one grayish morning last month in
Thomson Reuters’ office in Central.
“So we have to deal with investigations
and litigations on the one hand, and
on the other hand adapt our model
to see how we can reorganise and
restructure the institution to comply
with the variety of regulatory changes
as well as develop existing and new
business opportunities to replace
income streams that are no longer
viable.” </div>
<div class="grey">And to make it even more challenging,
a grayish macro-economic backdrop
where the economy remains weak in
Europe while recovering slowly in the
US.
“There are also challenges driven by the
plethora of reforms coming out of the
G20 commitments and demographics
and urbanisation, a whole range of
things… It is an interesting time to be in
banking,” he says with a laugh. The 53
year old should know, given that he was
once a key member of the Australian
Securities and Investments Commission,
responsible for enforcement.
The way that Mr. Longo sees it, how
the universal banking model changes
following the crisis will dictate the
future of banking. For instance, a key
discussion has been whether retail
banking activity should be separated
from trading and investment banking
activity.
“It’s a Glass-Steagall-type discussion,”
he continues, referring to the US
Banking Act of 1933, which separated
commercial and investment banking
components. It was passed during the
Great Depression in the 1930s. Sections
of it were repealed in 1999 partly to</div>
</div>
<div class="right">
<div class="red" >allow for the merger of retail banks
and investment banks that engage in
underwriting and dealing in securities
as banking operations.
“Some people argue that if we want to
protect the public purse, we need to get
so called ‘ risky’ investment banking
activity away from deposit-taking
activity that is seen as a public good.
That doesn’t seem to be happening in
the US, while that is happening in the
UK, with continued questioning in the
rest of Europe, generally, about whether
to do that.”
Before and after the GFC
The main difference before and after the
crisis, says Mr. Longo, is growth.
“Everybody was growing, hiring, legal
departments were growing,” he recalls.
“Since the crisis, there have been
enormous changes in how we think
about (things like) headcount,
resources, cost efficiency , adapting to
a new environment… Managing in that
environment is different from managing
in an environment where there is lots of
growth, hiring, and all of that.”
For instance, while he used to spend
more time on banking transactions in
the early days after joining Deutsche
Bank in 2002, Mr. Longo now often
finds himself dealing with managing a
range of regulatory issues and strategy .
Lawyers thinking of going in-house in a
bank now can also expect to deal with
a huge increase in regulatory work “to
develop responses to, and implement,
the immense amount of new global
bank and financial institution reforms”,
he says. These include “responding to
Dodd-Frank (Act) and Volcker (Rules)
from the US, the European Market
Infrastructure Regulation (EMIR), Living
Wills and Resolution plans, and the OTC
(over-the-counter) derivative reforms
and central clearing initiatives”.</div>
</div>
</div>
</body>
</html>
Thanks
Check out this fiddle and let me know if this is what you want.
I have made the following changes:
In your CSS the width of the left section was smaller than the sum of what was set for the white and grey divs and this was making the grey div to wrap-around (which is fall below). This was making your text overlap. Remember that the sum of the widths of the inner divs must be less than that of the container div for them to be displayed properly.
For your case we can split them just by using display: inline-block; rule itself and hence I have avoided the float rule settings. If you want to stick with floats, you can check this version.
I have rounded off the height setting to the nearest whole number just for example. You can modify this as required.
div.columns {
width: 670px;
height:710px;
}
div.left {
width:440px;
height:710px;
border-right:dotted;
display: inline-block;
}
div.right {
width:210px;
height:710px;
display: inline-block;
margin-left: 10px;
}
div.white {
width:215px;
height:100%;
border-right:dotted;
display: inline-block;
vertical-align: top;
}
div.grey {
width:215px;
height:100%;
display: inline-block;
}
.image {
height: 390px;
width: 100%;
}
Related
For an interior DIV with a border, how do I scroll the DIV's contents, but keep border fixed?
Let me begin with a jsFiddle:
https://jsfiddle.net/johnlove/f14rjc9o/35/
For an interior DIV with a border, I want to scroll the DIV's contents, but keep border fixed?
The background centers on the ability to scroll an inner DIV using only the window scrollbar and not use overflow-y.
When I scroll using window scrollbar, the inner DIV #scrollableContent does scroll ... but the text inside the css border leaks out!
Here is a picture or 2 ... the 1st before using scrollbar ... the 2nd after using scrollbar ... as you can hopefully see, the text inside the red border goes outside the red border:
1) HTML
<!--
BoltClock's code to scroll inner DIV using window's scrollbar
-->
<div id="overlayTop" class="overlay"></div>
<div id="overlayRight" class="overlay"></div>
<div id="overlayBottom" class="overlay"></div>
<div id="overlayLeft" class="overlay"></div>
<div id="roundedCornersWrapper">
<div id="roundedCorners">
<div id="scrollableContent">
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
</div>
</div>
</div>
2) CSS
First, the code for .overlay:
.overlay {
position: fixed;
}
#overlayTop, #overlayBottom {
height: 2.5em;
width: 100%;
}
#overlayLeft, #overlayRight {
height: 100%;
width: 2.5em;
}
#overlayTop { top: 0; }
#overlayLeft { left: 0; }
#overlayRight { right: 0; }
#overlayBottom { bottom: 0; }
Now, the regular stuff ...
body, #roundedCornersWrapper, #roundedCorners, #scrollableContent {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: darkgreen url(../pics/garlandBackground.gif);
}
#roundedCornersWrapper {
/*
"padding" = width of .overlay "borders"
*/
padding: 2.5em 2.5em;
}
#roundedCorners {
background: white url(../pics/music_notes.gif);
border-style: solid;
border-color: red;
border-radius: 1.25em;
border-width: .50em;
}
/*
This is added white space inside of your .overlay "borders" + #roundedCorners.
This separates the text etc. content from .overlay.
*/
#scrollableContent {
/*
v = 0 makes up for leading and trailing <p> .. </p> in text
*/
padding: 0.0em 1.0em; /* v,h */
}
/*
BEGIN the magic needed to make the roundedBodyCorners fill the whole window
*/
html, body {
height: 100%;
}
#roundedCornersWrapper {
height: 100%;
}
#roundedCorners {
height: 100%;
}
#scrollableContent {
height: 100%;
/*
overflow-y: auto; // the whole! idea is to dump the interior scrollbar //
*/
}
/*
END fill magic
*/
/*
Odds-and-Ends
*/
#scrollableContent {
font-size: 1.5em; /* = 1.5 X 12px from html Selector */
}
Here is a simpler alternative to the more advanced clip-path solution, below.
The main advantage of this solution is that the CSS is much more straightforward.
The main disadvantage is that it contains 8 presentational <divs>, so it doesn't represent anything we might reasonably regard as semantic document structure.
Working Example:
.bodyBackground {
position: fixed;
z-index: 12;
background-color: rgb(191, 191, 191);
}
.bodyBackground.top,
.bodyBackground.bottom {
left: 0;
width: 100%;
height: 20%;
}
.bodyBackground.right,
.bodyBackground.left {
top: 0;
width: 20%;
height: 100%;
}
.bodyBackground.top {
top: 0;
}
.bodyBackground.right {
right: 0;
}
.bodyBackground.bottom {
bottom: 0;
}
.bodyBackground.left {
left: 0;
}
.textBorder {
position: fixed;
z-index: 12;
background-color: rgb(255, 0, 0);
}
.textBorder.top,
.textBorder.bottom {
left: 20%;
width: 60%;
height: 6px;
}
.textBorder.top {
top: 20%;
}
.textBorder.bottom {
bottom: 20%;
}
.textBorder.right,
.textBorder.left {
top: 20%;
width: 6px;
height: 60%;
}
.textBorder.right {
right: 20%;
}
.textBorder.left {
left: 20%;
}
.text {
position: relative;
margin: 24vh 20vw;
}
<div class="bodyBackground top"></div>
<div class="bodyBackground right"></div>
<div class="bodyBackground bottom"></div>
<div class="bodyBackground left"></div>
<div class="textBorder top"></div>
<div class="textBorder right"></div>
<div class="textBorder bottom"></div>
<div class="textBorder left"></div>
<div class="text">
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
<p>'Well!' thought Alice to herself, 'after such a fall as this, I shall think nothing of tumbling down stairs! How brave they'll all think me at home! Why, I wouldn't say anything about it, even if I fell off the top of the house!' (Which was very likely true.)</p>
<p>Down, down, down. Would the fall never come to an end! 'I wonder how many miles I've fallen by this time?' she said aloud. 'I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—' (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) '—yes, that's about the right distance—but then I wonder what Latitude or Longitude I've got to?' (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say.)</p>
<p>Presently she began again. 'I wonder if I shall fall right through the earth! How funny it'll seem to come out among the people that walk with their heads downward! The Antipathies, I think—' (she was rather glad there was no one listening, this time, as it didn't sound at all the right word) '—but I shall have to ask them what the name of the country is, you know. Please, Ma'am, is this New Zealand or Australia?' (and she tried to curtsey as she spoke—fancy curtseying as you're falling through the air! Do you think you could manage it?) 'And what an ignorant little girl she'll think me for asking! No, it'll never do to ask: perhaps I shall see it written up somewhere.'</p>
<p>Down, down, down. There was nothing else to do, so Alice soon began talking again. 'Dinah'll miss me very much to-night, I should think!' (Dinah was the cat.) 'I hope they'll remember her saucer of milk at tea-time. Dinah my dear! I wish you were down here with me! There are no mice in the air, I'm afraid, but you might catch a bat, and that's very like a mouse, you know. But do cats eat bats, I wonder?' And here Alice began to get rather sleepy, and went on saying to herself, in a dreamy sort of way, 'Do cats eat bats? Do cats eat bats?' and sometimes, 'Do bats eat cats?' for, you see, as she couldn't answer either question, it didn't much matter which way she put it. She felt that she was dozing off, and had just begun to dream that she was walking hand in hand with Dinah, and saying to her very earnestly, 'Now, Dinah, tell me the truth: did you ever eat a bat?' when suddenly, thump! thump! down she came upon a heap of sticks and dry leaves, and the fall was over.</p>
<p>Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a corner, 'Oh my ears and whiskers, how late it's getting!' She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof.</p>
<p>There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.</p>
<p>Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them.</p>
<p>However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!</p>
<p>Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could not even get her head though the doorway; 'and even if my head would go through,' thought poor Alice, 'it would be of very little use without my shoulders. Oh, how I wish I could shut up like a telescope! I think I could, if I only know how to begin.' For, you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.</p>
<p>There seemed to be no use in waiting by the little door, so she went back to the table, half hoping she might find another key on it, or at any rate a book of rules for shutting people up like telescopes: this time she found a little bottle on it, ('which certainly was not here before,' said Alice,) and round the neck of the bottle was a paper label, with the words 'DRINK ME' beautifully printed on it in large letters.</p>
<p>It was all very well to say 'Drink me,' but the wise little Alice was not going to do that in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "poison" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked 'poison,' it is almost certain to disagree with you, sooner or later.</p>
<p>However, this bottle was not marked 'poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry-tart, custard, pine-apple, roast turkey, toffee, and hot buttered toast,) she very soon finished it off.</p>
</div>
One way you can achieve this effect is by defining the width, height and padding of the <body> and then using ::before and ::after pseudo-elements:
one pseudo-element to clip-path out the rest of the visible viewport
one pseudo-element to clip-path a fixed border for the text-window
In the example below, the ::before pseudo-element clip-path paints the whole of the rest of the body background black and the ::after pseudo-element clip-path gives the text-window a 6px red border.
Everything (except the width of the border) is defined using CSS Custom Properties at the top, so you can alter any of:
--textWidth
--textHeight
--textPadding
and everything else will reconfigure proportionately.
Working Example:
:root {
--textWidth: 400px;
--textHeight: 120px;
--textPadding: 12px;
--textWindowWidth: calc(var(--textWidth) + (2 * var(--textPadding)));
--textWindowHeight: calc(var(--textHeight) + (2 * var(--textPadding)));
--topMargin: calc((100vh - var(--textWindowHeight)) / 2);
--bottomMargin: calc(var(--topMargin) + var(--textWindowHeight));
--leftMargin: calc((100% - var(--textWindowWidth)) / 2);
--rightMargin: calc(var(--leftMargin) + var(--textWindowWidth));
}
body {
width: var(--textWidth);
height: var(--textHeight);
margin: var(--topMargin) var(--leftMargin);
padding: var(--textPadding);
border-radius: 15px;
}
body p:first-of-type {
margin-top: 0;
}
body p:last-of-type {
margin-bottom: calc(50vh - (var(--textHeight) / 2));
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(191, 191, 191);
clip-path: polygon(
0% 0%,
0% 100%,
var(--leftMargin) 100%,
var(--leftMargin) var(--topMargin),
var(--rightMargin) var(--topMargin),
var(--rightMargin) var(--bottomMargin),
var(--leftMargin) var(--bottomMargin),
var(--leftMargin) 100%,
100% 100%,
100% 0%
);
}
body::after {
content: '';
position: fixed;
top: var(--topMargin);
right: var(--rightMargin);
bottom: var(--bottomMargin);
left: var(--leftMargin);
width: var(--textWindowWidth);
height: var(--textWindowHeight);
padding: 6px;
background-color: rgb(255, 0, 0);
border-radius: 8px;
transform: translate(-6px, -6px);
clip-path: polygon(
0% 0%,
0% 100%,
6px 100%,
6px 6px,
calc(var(--textWindowWidth) + 6px) 6px,
calc(var(--textWindowWidth) + 6px) calc(var(--textWindowHeight) + 6px),
6px calc(var(--textWindowHeight) + 6px),
6px 100%,
100% 100%,
100% 0%
);
}
<body>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
<p>'Well!' thought Alice to herself, 'after such a fall as this, I shall think nothing of tumbling down stairs! How brave they'll all think me at home! Why, I wouldn't say anything about it, even if I fell off the top of the house!' (Which was very likely true.)</p>
<p>Down, down, down. Would the fall never come to an end! 'I wonder how many miles I've fallen by this time?' she said aloud. 'I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—' (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) '—yes, that's about the right distance—but then I wonder what Latitude or Longitude I've got to?' (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say.)</p>
<p>Presently she began again. 'I wonder if I shall fall right through the earth! How funny it'll seem to come out among the people that walk with their heads downward! The Antipathies, I think—' (she was rather glad there was no one listening, this time, as it didn't sound at all the right word) '—but I shall have to ask them what the name of the country is, you know. Please, Ma'am, is this New Zealand or Australia?' (and she tried to curtsey as she spoke—fancy curtseying as you're falling through the air! Do you think you could manage it?) 'And what an ignorant little girl she'll think me for asking! No, it'll never do to ask: perhaps I shall see it written up somewhere.'</p>
<p>Down, down, down. There was nothing else to do, so Alice soon began talking again. 'Dinah'll miss me very much to-night, I should think!' (Dinah was the cat.) 'I hope they'll remember her saucer of milk at tea-time. Dinah my dear! I wish you were down here with me! There are no mice in the air, I'm afraid, but you might catch a bat, and that's very like a mouse, you know. But do cats eat bats, I wonder?' And here Alice began to get rather sleepy, and went on saying to herself, in a dreamy sort of way, 'Do cats eat bats? Do cats eat bats?' and sometimes, 'Do bats eat cats?' for, you see, as she couldn't answer either question, it didn't much matter which way she put it. She felt that she was dozing off, and had just begun to dream that she was walking hand in hand with Dinah, and saying to her very earnestly, 'Now, Dinah, tell me the truth: did you ever eat a bat?' when suddenly, thump! thump! down she came upon a heap of sticks and dry leaves, and the fall was over.</p>
<p>Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a corner, 'Oh my ears and whiskers, how late it's getting!' She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof.</p>
<p>There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.</p>
<p>Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them.</p>
<p>However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!</p>
<p>Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could not even get her head though the doorway; 'and even if my head would go through,' thought poor Alice, 'it would be of very little use without my shoulders. Oh, how I wish I could shut up like a telescope! I think I could, if I only know how to begin.' For, you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.</p>
<p>There seemed to be no use in waiting by the little door, so she went back to the table, half hoping she might find another key on it, or at any rate a book of rules for shutting people up like telescopes: this time she found a little bottle on it, ('which certainly was not here before,' said Alice,) and round the neck of the bottle was a paper label, with the words 'DRINK ME' beautifully printed on it in large letters.</p>
<p>It was all very well to say 'Drink me,' but the wise little Alice was not going to do that in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "poison" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked 'poison,' it is almost certain to disagree with you, sooner or later.</p>
<p>However, this bottle was not marked 'poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry-tart, custard, pine-apple, roast turkey, toffee, and hot buttered toast,) she very soon finished it off.</p>
</body>
I would recommend that you adopt a file = "rootDependencies.css", or whatever you choose to name it, and link to it in your .html file. And inside this linked file place the following:
:root {
--viewportWidth: 100vw;
--viewportHeight: 100vh;
--backgroundColor: lightblue;
--textColor: black;
--matchingColor: gray;
--textborderInset: 20%;
--borderThickness: 0.5em;
}
As you know much better than I, you have a lot of arithmetic dependencies. Yes, the arithmetic involved is very basic, add subtract multiply, but you can express these dependencies via calc(var(--var1) - var(--var2)) in your style sheet.
And the best of all, this approach decreases the likelihood that you will miss calculations such as: calc(100% - 2*20%) etc etc.
Rounin: We both know that the overflow of the .text is there, but it is not visible because of z-index: 12; on both .bodyBackground and .textBorder. Now, comes the question: With the margin: 23vh 22vw; for .text, why does the z-index Selector have to be? Shouldn't the margin, in your model, the distance between the .text Object and the ViewPort, naturally prevent overflow from happening? Here's a pictorial of your layout: I just know? it has something to do with the basic box model, but I can't grasp it! For the benefit of others trying to answer this puzzle, .bodyBackground and .textBorder have position: fixed; and .text = position: relative;
Center a `.img-responsive`, in a `.container-fluid` and `row`, in bootstrap?
I don't expect the answers here to add much to the 21st century's understanding of computer science, but I am grateful for the help of the community. I have an image I'm trying to center in bootstrap. It's in a .container-fluid, a .row, and a .col-xs-6 with .offset-xs-3. The <img...> itself is .img-responsive. You can see the project on this codepen: http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000. The image is not centering - I should be able to get an image that scales with the viewport width (a la SVG) and is in the middle of the page. I can't seem to manage that. I'm wondering if it has something to do with the fact that I'm taking a "raw" image from dropbox as my src, that the image is a .jpg, or some combination? Then again, I'm a noob at this, so it's equally possible that there's just a typo somewhere I can't seem to find. I have been over the bootstrap docs, and various SO questions to no avail. The only solution I have found is removing the <img...> from the container and row, and assigning ... class="centered-block" .... Unless I'm fundamentally misapprehending something, however, (1) I shouldn't have to do that, and (2) rather than bashing through I'd like to understand what my conceptual error is in any case, for my own learning. PS - totally unrelated, but my <a ...></a> tags don't seem to be clickable. If anyone has any ideas there, that would be great too. It turns out the basic issue is that CodePen relies on Bootstrap 4, not (as I had assumed) Bootstrap 3.
You're using classes from Bootstrap 3 but loading the stylesheet from Bootstrap 4; they aren't compatible across the board. img-responsive no longer exists as well as the col-xs-* classes. See Images and Grid Options.
Note: Your links won't work because they aren't valid HTML and you're also closing your h2 with an h3, validate your markup.
Working Example:
#media (max-width: 480px) {
h1 {
font-size: 5vmax;
}
h2 {
font-size: 3.5vmax;
}
h3 {
font-size: 2.5vmax;
}
li {
font-size: 2.5vmax;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<h1 class="text-primary">Dr. Clair Cameron Patterson</h1>
<h2 class="text-secondary">The man who first learned the age of the Earth, and helped save a civilization from the dangers of its use of lead.</h2>
<div class="container-fluid">
<div class="row">
<div class="col">
<img src="https://www.dropbox.com/s/91fw6aazyxzb178/image-for-codecamp-tribute-page.jpg?raw=1" alt="Cartoon Image of Clair Cameron Patterson at Congressional Hearing" class="img-fluid mx-auto d-block" style="padding:1.5vmin">
</div>
</div>
</div>
<h3>Academics</h3>
<ul>
<li>Undergraduate, Grinnell College</li>
<li>PhD, University of Chicago</li>
<li>Researcher, California Institute of Technology</li>
</ul>
<h3>Brief Timeline</h3>
<ul>
<li><strong>1956</strong>: found the earth to be 4.55 Billion years old using lead-lead dating and
a fragment of a metorite that fell in Arizona. This calculation has been largely undisturbed since.</li>
<li><strong>1965</strong>: began campaign against lead in various products, especially gasoline, which at that time was emitting lead into the atmosphere.</li>
<li><strong>1978</strong>: wrote a 78-page minority opinion as part of a National Research Council (NRC) panel stating that controls on lead in various products had to start immediately, including gasoline, food containers, paint, glazes, and water distribution
systems.
</li>
<li>by the late <strong>1990s</strong>: levels of lead in Americans' blood has dropped by up to 80%. Though connections with Dr. Patterson's work are not clear, as the leading researcher in the area, and constant campaigner against the use of lead, it
is likely he was a major antecedant of this change.</li>
</ul>
</div>
Automatically assign width of <div> to contained <img> where width of image is not known
Not sure I worded the title optimally, but here's a simple explanation of my problem. I have an HTML structure like so: <div class="media-container" style="float: left"> <img src="..." /> <p class="caption">Here is a long caption that will extend beyond the width of the image.</p> </div> This is what it ends up looking like: I want the caption text to line-break once it hits the width of the image so it instead looks like this: I can get it the way I want by setting a fixed with on the container div, but I don't know that width ahead of time, so there's no way. Are there any solutions to this problem I'm overlooking that are possible in pure CSS without involving JavaScript?
Use display: table;
.media-container {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
<div class="media-container" style="float: left">
<img width="100" src="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" />
<p class="caption">Here is a long caption that will extend beyond the width of the image.</p>
</div>
Fiddle: https://jsfiddle.net/4pL4wm9h/
Add the following to the parent element:
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
Details on min-content can be found here
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
figure {
float: left;
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
</style>
</head>
<body>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by
arches into stiff sections.</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>
<figure>
<img src="http://i.imgur.com/sbxyLKX.png">
<figcaption>Here is a long caption that will extend beyond the width of the image.</figcaption>
</figure>
<p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had
recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then
turned to look out the window at the dull weather. Drops</p>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so
happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When,
while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the
trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel
the presence of the Almighty, who formed us in his own image, and the breath</p>
</body>
</html>
replicating css and or javascript of simple image/text layout
So I'm trying to replicate a page layout, it's an image that is the full height of a page with text to the right of it. The text width seems to adjust depending on the the image, I'm just not exactly sure how it's done. http://mcgarrybowen.com/en/People/Bill-Borrelle that's the page, any thoughts on how this was done? this is what I tried but isn't quite working right, looks like this http://www.klossal.com/klossviolins/about.html : <div style="width:100%;padding-top:40px;padding-bottom:40px;"> <div style="width:920px;position:relative;"> <div style="float:left;"> <img style="height:100%;" src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt=""> </div> <div style="float:left;"> <p style="color: #b9b8b4; font-family: 'Source Sans Pro' , sans-serif; font-size: 24px; text-align: left; position:relative; width:auto;">About</p> <p style="color: #b9b8b4; font-family: 'Source Sans Pro' , sans-serif; font-size: 14px; text-align: left; position:relative; width:auto;"> Mittenwald-trained, Master Violin Maker, Horst Kloss, has worked with fine stringed instruments and bows for over three decades. The Kloss Shop specializes in the repair, restoration, appraisal and sale of historic instruments and bows. Mr. Kloss further offers acoustic adjustment tailored to the individual musician's requirements, the application of museum conservation standards to preserve instrument integrity and maintain value as well as baroque conversion. Mr. Kloss is experienced in providing musicians with custom instrument set up designed to prevent overuse syndrome while maintaining maximal adjustment of tonal color, clarity and projection.<br><br> Since 1972, Horst Kloss has cared for collections of note along the East Coast of the United States, including the Boston Museum of Fine Art's collection of historic stringed instruments. He is one of under a hundred makers, nation-wide, whose extensive training and high caliber skills qualified him for full membership status in the American Federation of Violin and Bow Makers.<br><br> Raised among musicians and makers, Horst Kloss was imbued with a love of music and a profound sense of stewardship in caretaking for stringed instruments. At the age of 14, he began an apprenticeship in his hometown of Mittenwald, a center for violin-making since the 1600's. He received his formal training at the Bavarian State School of Violin Making in Southern Germany where he earned his Journeyman's diploma in 1964 and his Master's degree in 1972 under the tutelage of Josef Kantuscher. He moved to the United States in 1964 following the exodus of finer instruments from Europe and gained exposure to many of them while working for Carl Becker at Lewis & Sons. Mr. Kloss instructs the courses offered in instrument repair and restoration at the University of New Hampshire's Violin Craftsmanship Institute. He established shops in Houston and Boston before settling in Needham, Massachusetts.<br><br> Horst Kloss has attracted an international clientele, including many distinguished concert performers, who value his consistently high quality restoration and sound adjustments. His experienced eye and broad client base make him especially well-suited to bring buyers and sellers of fine stringed instruments together.</p> </div> <br class="clear"> </div>
The layout is built on Twitter Bootstrap, and implements its responsive feature.
Update: Here's a start. You should really use classes instead of all those inline styles. It makes modifying your layout immensely easier.
http://jsfiddle.net/xfPKx/2/
.wrapper {
width:100%;
}
.portrait {
height: 100%;
left: 0;
position: fixed;
width: 50%;
}
.text {
float: right;
margin: 5% 0;
max-width: 30%;
width: auto;
}
<div class="wrapper">
<div class="portrait">
<img src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt=""
/>
</div>
<div class="text">
...
Why are the images not showing in IE7?
Note: this question is no longer relevant. The site has been moved to a new host and the the code on the site no longer applies.
Thanks.
I am trying to help out a client. The site is almost ready to go, but there are a series of images that simply disappear in IE7.
The click on the Leadership tab and the whole block of content vanishes.
Here is the html for that section:
<div id="leadership-content" class="content">
<p class="intro">Leadership for every company is important in the daily management and growth as a business matures. At Moving Simplified we feel that offering our employees career-oriented paths gives them a more sincere desire to provide outstanding customer service. All employees have the option to "climb the ladder" to eventually own a franchise of their own.</p>
<div class="profile">
<h3>Eric M. Snider<img class="flt-right" src="_images/Eric_Snider_Logo_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" /></h3>
<h4>Founder / Chief Executive Officer</h4>
<p>Eric founded Moving Simplified in 2007 as a professional services company with a new concept to assist people during one of the most stressful times of their lives: moving. His vision was to build a new type of moving services company - a company that would include every service that a customer would need during their move. Bringing it all together in one company offering is the key differentiating factor with Moving Simplified. "We are changing the face and perception of the moving company stereotype one move at a time," says Snider. "We do this everyday by holding ourselves to a higher standard of service, people skills and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Ben_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Ben Simmons</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Ben joined Moving Simplified in 2009 as one of the first management team members. Ben's entrepreneurial spirit and physical fitness background makes him an excellent team player and role model. "We're working hard everyday to help change the perception and face of the moving business," says Simmons. "It can only be accomplished through discipline, desire and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Tim_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Timothy Browne</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Tim joined Moving Simplified in 2009 as a team leader and manager. Tim has a professional service background that was a natural catapult into Moving Simplified. "As a crew leader and senior manager, I have a responsibility to ensure that our customers are 100% satisfied with our moving team's presentation, ability and performance," says Browne. "Our goal is to be the area's top moving services provider and we strive to deliver that top-tier level of service with every customer."
</p>
</div>
Here is the css:
.profile { width: 630px; padding-bottom: 20px; }
#mainContent .profile h3 { margin-top: 10px; }
#mainContent .profile p { float: left; width: 350px; }
.profile img { float: right; }
.gray-line { clear: both; }
It shows up fine in Safari and Firefox but in IE7 it is nowhere to be seen.
Thanks for any help!
Are the images that don't show all in the same folder? Try renaming the folders to a name without an underscore _ at the start. By the way, the images don't show in my Firefox nor IE8.