For a child div if I provide position fixed, it is positioning itself relative to the parent div. As per my understanding, a fixed positioned element is taken out of the flow so that it is relative to the viewport.
My question is why child div is coming inside main div?
Below is my code.
#main {
margin-left : 30px;
background-color : red;
width : 100px;
height : 100px
}
#child {
position : fixed;
background-color : yellow;
width : 50px;
height : 50px;
}
<div id="main">
<div id="child">Child Div</div>
</div>
It's not. It just looks that way. Set the top property to 0 and you'll see it sticks to the top of the viewport. You just didn't move it anywhere.
#main {
margin-left : 30px;
background-color : red;
width : 100px;
height : 100px
}
#child {
position : fixed;
background-color : yellow;
width : 50px;
height : 50px;
top:0;
}
<div id="main">
<div id="child">Child Div</div>
</div>
Another way to see that it's actually fixed would be to add enough content after it so that you can scroll down and see that it is indeed fixed.
#main {
margin-left: 30px;
background-color: red;
width: 100px;
height: 100px
}
#child {
position: fixed;
background-color: yellow;
width: 50px;
height: 50px;
}
<div id="main">
<div id="child">Child Div</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
Related
In this flexbox skeleton, I have the .body that is containing 3 rows.
The .main row (blue) contains a content that will always overflow.
I want to keep scroll in body (like it is now), but I want also that the 3 rows including (.main) grow and fill all the .body(green) section.
So my problem, when the body overflow correctly, its children doesn't stretch with it.
You can have the code directly here:
https://jsfiddle.net/garalimedkarim/5khms9Lx/16/
Html
<div class="container">
<div class="header">
Header
</div>
<div class="body">
<div class="left-sidebar"></div>
<div class="main">
<div class="content">
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
</div>
</div>
<div class="right-sidebar"></div>
</div>
</div>
css:
html,
body {
margin: 0;
background-color: red;
}
.container {
background-color: cyan;
height: 20rem;
display: flex;
flex-flow: column nowrap;
}
.header {
flex: 0 0 2rem;
background-color: bisque;
}
.body {
background-color: green;
flex: 1;
overflow: auto;
display: flex;
flex-flow: row nowrap;
}
.left-sidebar {
background-color: blueviolet;
flex: 0 0 25%;
}
.main {
background-color: blue;
flex: 0 0 50%;
}
.right-sidebar {
background-color: black;
flex: 0 0 25%;
}
Flex is kinda funky when you're managing sizing in 2D
Grid is better for that
.body {
background-color: green;
flex: 1;
overflow: auto;
display: grid;
grid-template-columns: 0.25fr 0.5fr 0.25fr;
}
I want to create a card-layout for my html elements. I came across this beautiful exposition by Jen Simmons, but it implements the idea using columns. The thing is that columns do not allow control over the width of each column, meaning equal width for each column.
Since in my webpage I want to keep control over the column width, I turned into grid:
main {
display: grid;
grid-template-columns: 60% 40%;
}
And here comes my question: How can I achieve this desired card layout using grid?
The desired visual effect is that each box (element) would appear after the one above it without taking into account the height of the box to its right or left.
The following image demonstrates:
Any help about it?
My code:
body {
margin: 10px;
width: 500px;
}
main {
display: grid;
grid-template-columns: 60% 40%;
}
section {
margin: 10px;
border: 1px solid black;
}
<main>
<section class="A">
<h3>Header 1</h3>
<p>Short text</p>
</section>
<section class="B">
<h3>Header 2</h3>
<p>Some Very long and boring text that lasts over a few lines.</p>
</section>
<section class="C">
<h3>Header 3</h3>
<p>Some text. Lorem ipsum dolor sit amet.</p>
</section>
</main>
The way I would do it, would be to re-structure your page, as the grid elements in the same row, are all one block, so if you separate them into the left column and right column, you can achieve this effect.
All I did was group the divs into the left and right columns to determine the heights of each one individually, based on columns and not rows.
body {
margin: 10px;
width: 500px;
}
main {
display: grid;
grid-template-columns: 60% 40%;
}
section {
margin: 10px;
border: 1px solid black;
}
.B {
height: 60%;
}
<body>
<main>
<div class="rContainer">
<section class="A">
<h3>Header 1</h3>
<p>Short text</p>
</section>
<section class="C">
<h3>Header 3</h3>
<p>Some text. Lorem ipsum dolor sit amet.</p>
</section>
</div>
<div class="rContainer">
<section class="B">
<h3>Header 2</h3>
<p>Some Very long and boring text that lasts over a few lines.</p>
</section>
</div>
</main>
</body>
I have an issue where the cursor jumps to wrong place when user clicks inside of contenteditable div but outside of the actual text. It seems to be a problem only in newer versions of Chrome (and also Opera): coincidentally I tested my example in an older browser (Chrome version 55) and the issue was not present at all. No problem in Edge/IE11/FireFox either.
The issue occurs only when user clicks behind a line of text or on an empty line that sits between the two yellow divs with class pagebreak. The cursor ends up above the first pagebreak div. And whether or not it is directly related, I don't know, but the problem disappears when the div with class flowbox is removed. Unfortunately I can not remove this div with class flowbox from the App.
I have put together an example showing my problem in this fiddle: https://jsfiddle.net/dymcn1ao/
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
The textfield on the left has the problem, the one on the right works as expected because the .flowbox div has been removed.
Edit 1:
I have created a new example that maybe is easier to understand. The other elements in the .textframe (like the pagebreak and flowbox elements) do actually have specific purposes so they can not be disregarded. Here is the link to the improved demo: https://jsfiddle.net/q4pu37dn/15/
Update 3 (Demo 3)
Changes
I noticed that there are no longer any position: relative used in most current OP code which is good, but I believe this was was forgotten:
<span class='pagebreak spacer'contenteditable="false"></span>
I believe that you originally used contenteditable="false" in order to give your .pagebreaks extra functionality and also prevent them from being deleted, so I added them back in.
Comparison
Demo 3 has my solution side by side to OP code to compare behavior. Demo 3 also features 2 buttons (1 for each content editor) which highlights each <span> of text. The following is a list of the classes from OP code (the content editor on the right) and the list of each classes equivalent from my code (content editor on the left.)
div.textframe................section.editor
p.textOutline................article.content
span.flowbox.spacer......mark.vertRule
span.pagebreak.spacer ..mark.breaker
There are 2 requirements that the OP is concerned about:
When the empty areas surrounding the <span>s are clicked, the cursor will jump to the corner of the content area.
The number of characters per line must be consistent with the OP code's current capacity.
This problem has been around for years but the reason why is nebulus, so if you treat this aberration as just behavior, you can just counter it by instilling different behavior.
Demo2 and Demo3 meet these criteria by simply applying the following style rulesets:
Demo 2
article p {display: table;...
Demo 3
.content {display:table-cell;...
The behavior of tables-cells are rigid and well established, and AFAIK are the only non-replaced element that by default conforms to it's content and conforms to the surrounding table elements. As a bonus an element with display: table-cell (not <td>) isn't required to be nested within a <tr> that's within a <table>.
Demo 3
.content { display: table-cell;...
Fiddle
/* Begin Defaults */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
background: white;
font: 400 16px/1.45 Arial;
height: 100%;
width: 100%;
}
/* End Defaults */
/* Begin Optional Layout */
#page01 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
background: rgba(45, 99, 198, 0.6);
margin: 0 auto 20px;
height: fit-content;
min-width: 100%
}
/* End Optional Layout */
/* Begin Primary Styles */
.editor {
width: 350px;
height: 600px;
border: 1px solid black;
background: #fff;
}
.vertRule {
float: right;
clear: right;
width: 30px;
height: 600px;
}
.content {
display: table-cell;
word-break: break-word;
}
mark {
display: block;
pointer-events: none;
}
.break {
min-height: 80px;
}
/* End Primary Styles */
/* Begin Control */
/* https://jsfiddle.net/q4pu37dn/15 */
.textframe {
width: 350px;
height: 600px;
border: 1px solid black;
background: #fff;
}
.flowbox {
float: right;
clear: right;
width: 30px;
height: 600px;
}
.spacer {
background: yellow;
}
.pagebreak {
display: block;
min-height: 80px;
}
/* End Control */
/* Begin Demo Test */
.btn {
display: inline-block;
font: inherit;
margin: 5px 10px;
padding: 2px 5px;
border: 5px outset grey;
border-radius: 8px;
color: #000;
cursor: pointer;
}
[type='checkbox']:checked+label {
background: rgba(255, 12, 34, 0.75);
border: 5px inset grey;
color: #fff;
}
#outline1:checked+label+#outline2+label+hr+#page01>.editor>.content *,
#outline2:checked+label+hr+#page01>.textframe>#textOutline *:not(.spacer) {
color: #fff;
background: tomato;
outline: 2px solid red;
}
#outline1:checked+label+#outline2+label+hr+#page01>.editor>.content>.break,
#outline2:checked+label+hr+#page01>.textframe>#textOutline>.spacer {
background: yellow;
outline: none;
}
/* End Demo Test */
<!-- Begin Demo Test -->
<input id="outline1" type='checkbox' hidden>
<label for='outline1' class='btn'>Outline 1</label>
<input id="outline2" type='checkbox' hidden>
<label for='outline2' class='btn'>Outline 2</label>
<hr>
<!-- End Demo Test -->
<!-- Begin Optional Layout Part 1 -->
<main id='page01'>
<!-- End Optional Layout Part 1 -->
<!-- Begin Primary Markup -->
<section class="editor" contenteditable='true'>
<mark class="vertRule" contenteditable='false'></mark>
<article class='content'>
<span>
Clicking here is not a problem
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<mark class="break" contenteditable='false'></mark>
<span>
Clicking here (on empty space, not directly on text) will put the caret above the first .break element.
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<mark class="break" contenteditable='false'></mark>
<br>
<span>
Clicking here is not a problem
</span>
<br>
<br>
</article>
</section>
<!-- End Primary Markup -->
<!-- Begin Control -->
<div class="textframe" contenteditable>
<p id='textOutline'>
<span class="spacer flowbox"></span>
<span>
Clicking here is not a problem
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<span class="spacer pagebreak"></span>
<span>
Clicking here (on empty space, not directly on text) will put the caret above the first .pagebreak element.
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<span class="spacer pagebreak"></span>
<br>
<span>
Clicking here is not a problem
</span>
<br>
<br>
</p>
</div>
<!-- End Control -->
<!-- Begin Optional Layout Part 2 -->
</main>
<!-- End Optional Layout Part 2 -->
Update 2 (Demo 2)
OP regarding Demo 1:
"you solved it for my contrived example, yes. Unfortunately it is not possible to set those values on the elements in the actual app, the flow gets totally out of wack there."
See Demo 2, it works better than Demo 1. Since it uses only positioned elements, there are no conflicts in flow. In order to adapt Demo 2 to your app, all you need to do is add position:relative to the parent elements. The relevant style is as follows:
article p {display: table;...
It was necessary to assign position:relative to everything nested within .textframe, otherwise the static elements would not interact with the positioned elements. There are rules that tables and table components adhere to that not only apply to its' content but how they interact with their neighboring elements as well.
Demo 2
article p {display: table...
.container {
width: 400px;
float: left
}
.textframe {
width: 350px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
/* Needed for long words */
word-break: break-word;
}
.textframe article {
position: relative;
height: 650px;
}
article p {
display: table;
margin: 0;
position:relative;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
.pagebreak {
display: block;
pointer-events:none;
position:relative;
}
<div class="container">
<h4>
article p {display: table; position: relative;}<br>
all children of .textframe have: position: relative;
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<mark class="pagebreak" contenteditable="false" style="min-height: 80px"></mark>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<mark class="pagebreak" contenteditable="false" style="min-height: 80px"></mark>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
<hr>
</article>
</div>
</div>
Refences
MDN - Float
MDN - Position
CSS Tricks - Absolute Positioning Inside Relative Positioning
CSS Tricks - All About Floats
display: table/table-cell
word-break:break-word
The issue is with the display, I am also new to this but when I changed your span to div it worked fine, do let me know if it is right or I was not able to understand your question rightly.
Now I am not sure why this was happening, so not able to provide you with an in-depth explanation.
Note - Usage of span and div will not be proper after this, so will have to change to div at other places too.
.title {
left: 20px;
}
.container {
float: left;
width: 400px;
}
.textframe {
width: 311px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
}
.textframe.b {
left: 380px;
}
.textframe article {
position: relative;
height: 650px;
}
article p {
margin: 0;
}
.pagebreak {
display: block;
position: relative;
background: yellow;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
<div class="container">
<h4>
With problem:
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<div>Foo bar baz</div>
<br>
<div>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</div>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
<div class="container">
<h4>
Without problem:
</h4>
<div class="textframe b">
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<div>Foo bar baz</div>
<br>
<div>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</div>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
This problem occurs because you use float: right;.
Do not use CSS property float: right; if you do not need it. You could have a lot of problems with it. In your case you do not need it. Instead of this you have use inline-block elements as <div class="flowbox"> and <article contenteditable="true">.
The minimal example with float:right (WITH problem)
.textframe {
width: 311px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
.pagebreak {
display: block;
position: relative;
background: yellow;
}
<div class="container">
<h4>
With problem:
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span><br>
<span>Lorem ipsum CLICK ABOVE THIS WORDS sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
The solution
The minimal example with display:inline-block (without problem)
Note: now I have placed your <div class="flowbox"></div> after <article> element.
.textframe {
width: 311px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
}
.flowbox {
width: 2px;
height: 650px;
outline: 1px solid red;
}
.pagebreak {
display: block;
position: relative;
background: yellow;
}
.flowbox, article{display:inline-block;vertical-align:top;}
article{width: 305px;}
<div class="container">
<h4>
With problem:
</h4>
<div class="textframe a">
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span><br>
<span>Lorem ipsum CLICK ABOVE THIS WORDS sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
<div class="flowbox"></div>
</div>
</div>
I am using newest version of Chrome on Linux/Ubuntu and this seems to have solved the issue. I have just removed contenteditable from article and put it on spans that you wanted to edit.
<article>
<p>
<span>
<span contenteditable="true">Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span contenteditable="true">Foo bar baz</span>
<br>
<span contenteditable="true">Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
I think issue is with span if you have an empty span in it. I have gone through this issue while working with contenteditable so cursor shows up there but you are not able to make it move.
I will suggest you to Remove span from your p to each paragraph so that if span is empty try to remove it on backspace/delete.
Or refer CKEDITOR as it have solved that problem
article p, article div
{
line-height: 1.25;
margin-top: 12px;
margin-bottom: 12px; /* margin-bottom: 10px; removed for proper pagebreak 31-1-2017*/
font-family: Helvetica;
}
.title {
left: 20px;
}
.container {
float: left;
width: 400px;
}
.textframe {
width: 311px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
}
.textframe.b {
left: 380px;
}
.textframe article {
position: relative;
height: 650px;
}
article p {
margin: 0;
}
.pagebreak {
display: block;
position: relative;
background: yellow;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
With problem:
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
<div class="container">
<h4>
Without problem:
</h4>
<div class="textframe b">
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
I'm using max-width and width to make my website responsive to window size.
My content div is not downsizing when the website is made smaller.
The content is told that its max width is 800px, and its set to be 100%.
However its not downsizing when outercontainer does.
Any thoughts?
#charset "utf-8";
/* CSS Document */
#font-face {
font-family: 'Bebas';
src: url(Website%20Specific%20Resources/BEBAS.TTF)
}
body {
background-image:url(Website%20Specific%20Resources/Background.png);
max-width:1920px;
width:100%;
margin: auto;
}
.outercontainer{
height:100%;
max-width:1920px;
width:100%
}
.container {
max-width:960px;
width:100%;
max-height:300px;
height:100%;
margin-top: 100px;
margin:auto;
}
.header {
background-image:url(Website%20Specific%20Resources/New_Banner_.png);
max-height: 300px;
max-width: 1920px;
width: 100%;
height: 100%;
top: 0;
position: fixed;
z-index:5;
}
A {
text-decoration:none;
font-family: "bebas";
color: #fff;
}
li {
z-index:2;
list-style:none;
float:left;
padding-right:50px;
margin-left:25px;
padding-top:15px;
font-size:24px;
}
.nav {
z-index:2;
position: absolute;
}
.content {
font-family: "bebas";
max-width: 800px;
width: 100%;
height: 100%;
margin: auto;
background-color: #009999;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="outercontainer">
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li>Home </li>
<li>About Us </li>
<li>Products </li>
<li>Gallery </li>
<li>Contact Us </li>
</ul>
</div>
</div>
</div>
<div class="content" >
<p>asdasdasdasdaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>asdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasda</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>sdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</body>
</html>
so far i can see it's resizing well in chrome. however i think you forgot to add the meta tag for responsive layout <meta name="viewport" content="width=device-width, initial-scale=1.0">
Ur content is responsive. Since you are not giving space b/w letters that why it is not coming down. Add some space and check it out
<p>sdasdafasdasda sdasdafasdasdasdasdafa sdasdasdasdafas dasdasdasdafasd asdasdasdaf</p>
If you want break the word even without space. U can add the following one
word-wrap: break-word;
Solution: Apply Word-Wrap to your paragraph
Word-wrap:
Usage:
Allow long words to be able to break and wrap onto the next line:
Implementation:
p {
word-wrap: break-word;
}
Working Fiddle: https://jsfiddle.net/rittamdebnath/uy2r6jh7/
I have the following problem:
There's an image floating left and a margin to the right.
Next to it, there is a div containing a headline and a text (I don't know any height-values of both, because it will be inserted dynamically).
The headline must align to the top and the text to the bottom. I thought it's enough to position the text absolute, but if the height of the image is smaller than the height of the headline + the text, the text flows into the headline....
I haven't found any solution to position the text at the bottom but letting it stay in document flow.
I am not allowed to use any table-elements (on the otherhand, display: table and so on is allowed, but I haven't figured out any solution with that as well)
<<<HTML
<div>
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div> <!-- float left, margin-right -->
<img>
</div>
<div> <!-- float left -->
<h5>The headline aligning to the top</h5>
<p>
Some text aligning to the bottom
</p>
</div>
</div>
</div>
HTML
Please help me, I just can't figure out any solution!
/EDIT:
Both the imnages' and text-/headline-containers' height may vary, so no fixed height.
What i got so far is (by assuming, the text wont have more than 4 lines (but thats not the best way). The next Problem is: Firefox adds the margin-bottom of .box to the bottom: 0; of the text (like: bottom: -35px; But shown as bottom: 0; ... Chrome does interpret that the right way):
<style>
.box {
width: 488px;
float: left;
margin-bottom: 33px;
margin-right: 22px;
padding-top: 5px;
}
.table {
display: table;
}
.box.wide .box-content {
display: table-row;
}
.box.wide .box-content > div {
display: table-cell;
position: relative;
width: 233px;
}
.box.wide .box-content > div:first-child {
margin-right: 22px;
}
.box.wide .box-content div h5 {
padding-bottom: 88px;
}
.box.wide .box-content div p {
position: absolute;
bottom: 0px;
}
</style>
<div class="box wide width-488">
<div>
<h4>Überschrift</h4>
<div class="table">
<div class="box-content">
<div>
<img alt="" height="401" width="233" src="res/dummy/233-130.jpg">
</div>
<div>
<h5>Überschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing eliÜberschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing elit</h5>
<p>
Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lor em ipsum dolor amet.
mehr
</p>
</div>
</div>
</div>
</div>
</div>
try using display: inline-block; on both floating elements and the text element that you want aligned to the bottom.
Then put the property vertical-align: bottom; on the text element you want aligned to the bottom.
I assumed you can make the right column a fix height, since the left column & right are the same in your image example.
I made a jsfiddle for your convenience: http://jsfiddle.net/hLPXM/
Alternately, here is what I did, based on your original code:
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div class="left"> <!-- float left, margin-right -->
<img src="http://placehold.it/150x350" alt="placeholder" />
</div>
<div class="right"> <!-- float left -->
<h5>The headline aligning to the top</h5>
<div class="bottom-text">
<p>
Some text aligning to the bottom
</p>
</div><!-- .bottom-text -->
</div>
</div>
Note I added a .bottom-text class around the <p> that you want to align bottom.
Here is the CSS for the divs to float properly, etc. Note the position:relative; :
.left {float:left; margin-right:20px;}
.right {float:left; background:#eeddff; /*background to see div*/}
.left, .right {height:350px; position:relative;}
And more importantly the text starting from the baseline:
.bottom-text {
position:absolute;
bottom:0;
}
Here is a solution for you, using display: table, relative and absolute positioning:
<div>
<h4>A headline, that isn't involved</h4>
<div style="display:table;">
<div style="display:table-row;">
<div style="display:table-cell;padding-right: 20px;">
<img style="display:block" src="http://baconmockup.com/300/200">
</div>
<div style="display:table-cell;background:green;position:relative;vertical-align:top;">
<p style="">Some text aligning to the top</p>
<p style="position:absolute;bottom:0;">Some text aligning to the bottom</p>
</div>
</div>
</div>
</div>
It does not rely on any fixed heights, and adopts to the height of the image automatically.
jsfiddle.net/EUvXh/
I don't know if you have already fixed this but the easiest way is to add margin-top: auto; to your p tag.