I created a parent Div with 3 children Div's within it. I want each of the 3 Divs to be on the same column, but on the centre of the screen with 10px separating the border from each other, while still maintaining the 3 boxes centred on the screen together.
I have a very basic grasp on CSS3
#prices {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px;
}
#tenor {
justify-self: end;
}
#bass {
justify-self: center;
<!-- Beginning of HTML5 Code -->
<div id="prices">
<div id="tenor">
<h3>TENOR TROMBONE</h3>
<h4>$600</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="bass">
<h3>BASS TROMBONE</h3>
<h4>$900</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.com<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="valvet">
<h3>VALVET TROMBONE</h3>
<h4>$1200</h4>
<p>
Plays similar to a Trumpet.<br>
Great for Jazz Bands.<br>
Lorem ipsum.
<p><button class="btn">Select</button>
</p>
</div>
</div>
With the code above, everything is centered perfectly, but there are huge gaps between each of the 3 boxes. How do I remove the gaps, but make sure its still centered relative to the screen?
Thank you in advance.
You can use the CSS flex property to achieve this
JSFiddle
<html>
<head>
<style>
#prices {
display: flex;
justify-content:center;
align-items:center;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px;
}
</style>
<body>
<div id="prices">
<div id="tenor">
<h3>TENOR TROMBONE</h3>
<h4>$600</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="bass">
<h3>BASS TROMBONE</h3>
<h4>$900</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.com<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="valvet">
<h3>VALVET TROMBONE</h3>
<h4>$1200</h4>
<p>
Plays similar to a Trumpet.<br>
Great for Jazz Bands.<br>
Lorem ipsum.
<p><button class="btn">Select</button>
</p>
</div>
</div>
</body>
</head>
</html>
Try this one your using margin: 10px; these three #tenor, #bass, #valvet ids. If you don't want the gap between the grid columns you have to use margin: 10px 0; in these three #tenor, #bass, #valvet ids.
#prices {
display: flex;
justify-content:center;
align-items:center;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px 0;
}
<html>
<head>
<body>
<div id="prices">
<div id="tenor">
<h3>TENOR TROMBONE</h3>
<h4>$600</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="bass">
<h3>BASS TROMBONE</h3>
<h4>$900</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.com<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="valvet">
<h3>VALVET TROMBONE</h3>
<h4>$1200</h4>
<p>
Plays similar to a Trumpet.<br>
Great for Jazz Bands.<br>
Lorem ipsum.
<p><button class="btn">Select</button>
</p>
</div>
</div>
</body>
</head>
</html>
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>
The bb class background colour would be red if I move the code before the intro-block class css codes , however if I put it after the intro-block class css codes the colour is not changing and nothing happens!
Could anyone tell me why this happens?!
.left-column {
width: 35%;
margin-left: 20px;
margin-right: 50px;
float: left;
overflow: hidden;
}
.right-column {
overflow: hidden;
}
.intro-block {
background-color: #22AAA1;
margin: 0 auto;
/*max-width: 950px;*/}
}
.bb {
background-color: red;
}
<body>
<header>
<section class="intro-block">
<div class="left-column">
<img class="profile-pic right-column" src="img/11.jpg">
</div>
<div class="right-column">
<h1>lorem ipsum</h1>
<p>
<h4>lorem ipsum</h4>
</p>
</div>
</section>
</header>
<main>
<section class="bb">
<h3>lorem ipsum</h3>
<div class="left-column">
<div>
<p>lorem ipsum</p>
</div>
</div>
<div class="right-column">
<h5>lorem ipsum</h5>
</div>
You have an extra } just before .bb {}
Note: don't wrap headings (h1 to h6) in p
You should indent/tidy your code for better reading and with that you will find this mistakes easily
.left-column {
width: 35%;
margin-left: 20px;
margin-right: 50px;
float: left;
overflow: hidden;
}
.right-column {
overflow: hidden;
}
.intro-block {
background-color: #22AAA1;
margin: 0 auto;
/*max-width: 950px;*/
}
.bb {
background-color: red;
}
<body>
<header>
<section class="intro-block">
<div class="left-column">
<img class="profile-pic right-column" src="img/11.jpg">
</div>
<div class="right-column">
<h1>lorem ipsum</h1>
<h4>lorem ipsum</h4>
</div>
</section>
</header>
<main>
<section class="bb">
<h3>lorem ipsum</h3>
<div class="left-column">
<div>
<p>lorem ipsum</p>
</div>
</div>
<div class="right-column">
<h5>lorem ipsum</h5>
</div>
</section>
</main>
/max-width: 950px;/}
you have an extra } after the quoted line that messes up with the following rules ...
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>
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/