Please check the jsFiddle link and tell why padding is not visible inside div container?
body {
background-color: #B8C4BB;
}
.container {
text-align: center;
}
.section_two {
border: 2px solid red;
padding: 10 px;
}
<div class="container">
<div class="section">
Change the value of the color property to see how it changes the text color of this element.
</div>
<div class="section_two">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, alias, aliquid fugiat dolorem repudiandae quidem. Molestiae illum pariatur officia voluptate cumque. Necessitatibus earum consequuntur explicabo minus ratione mollitia illum nam.
</div>
</div>
You have only typing mistake.
use padding property
like: padding: 10px;
insteade of: 10 px;
See Fiddle demo
Your css is like following:
.section_two {
border: 2px solid red;
padding: 10 px;
}
Value for padding is invalid. It should be as padding: 10px. Without space between 10 and px
It is not working because you have put a space between 10 and px. It should be like following code.
.section_two {
border: 2px solid red;
padding: 50px;
}
Related
In the following example div is larger then section so the section has a visible overflow. I want main to expand and take this overflow so that the text bellow main won't be overlapped. But the size of the section should be kept the same.
main {
outline: 1px dotted red;
}
section {
width: 8em;
height: 4em;
padding: 1em;
border: 1px solid;
color: blue;
}
<main>
<section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quos amet impedit esse veritatis quia omnis.</div>
</section>
</main>
Some text goes here and gets crossed by an overflow.
Searching for css-only solution replacement of this script:
var main = document.querySelector('main')
var sectionBB = document.querySelector('section').getBoundingClientRect()
var divBB = document.querySelector('div').getBoundingClientRect()
main.style.minHeight = divBB.bottom - sectionBB.top + 'px'
main {
outline: 1px dotted red;
}
section {
width: 8em;
height: 4em;
padding: 1em;
border: 1px solid;
color: blue;
}
<main>
<section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quos amet impedit esse veritatis quia omnis.</div>
</section>
</main>
Some text goes here and gets crossed by an overflow.
If you want the full problem, it's needed for one of the incomplete solutions of this question which is here: https://jsfiddle.net/nxy561ze/.
float can help here but I don't think it will help you with your other question:
main {
outline: 1px dotted red;
overflow:auto;
}
section {
width: 8em;
height: 4em;
padding: 1em;
border: 1px solid;
color: blue;
}
section div {
float:left;
}
<main>
<section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quos amet impedit esse veritatis quia omnis.</div>
</section>
</main>
Some text goes here and gets crossed by an overflow.
I've got a relatively long phrase that consumes way too much space on mobile devices. It looks something like this:
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.container {
width: 100%;
height: 100%;
}
.text {
/*
* Don't want to change font-size, because text
* sometimes maybe shorter and 2.2rem is perfect
* for phrases that are not as long
*/
font-size: 2.2rem;
}
<body class="artificial-phone-viewport">
<div class="container">
<div class="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
</div>
</div>
</body>
What I want is to make this text span at most, let's say, 10rem height. If it can't fit into 10rem of height, it should instead expand horizontally, maybe, overflowing its parent, maybe like this:
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.text {
font-size: 2.2rem;
white-space: nowrap;
}
<body class="artificial-phone-viewport">
<!-- Deleted container to reduce code, it actually
doesn't matter, because it anyway spans
100% width and height of its parent -->
<div class="text">
Lorem ipsum dolor, sit amet consectetur<br/>
adipisicing elit. Temporibus saepe illum<br/>
a magni sequi error fugit dolore neque<br/>
voluptates in laborum.
</div>
</body>
P.S. This snippet is just an example of what I want to see, I don't want any of these <br/>s or white-space: nowrap. Also I want the text to overflow its parent, because I then can use Javascript to scale it propertly, but it is not very relevant for the question, I suppose.
So I figured out a way to do it with Javascript, although I don't like it too much. I just increased the width of the element, until the height was small enough, like this
const text = document.querySelector('.text')
const rem = parseFloat(
getComputedStyle(document.documentElement).fontSize
)
let width = text.clientWidth / rem
while(text.clientWidth > 10*rem) {
width++
text.style.width = `${width}rem`
}
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.text {
font-size: 2.2rem;
}
<body class="artificial-phone-viewport">
<div class="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
</div>
</body>
It's not very nice, but it works for me. If someone finds a way to do it without javascript, I'm open to other solutions
I have a container centered with a max width as follow:
#container {
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
Now I want to create a new div just below the contained one, but I want this new div to align to the left and expand beyond the right side of the container. Something like that:
|||||||||||||||||||||||||||||||||||| #container
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| #div 2
The difficulty is that #container margins are auto, so how can I force #div to follow #container left margin as the browser resizes?!
NOTE: I am looking for a pure CSS solution WITHOUT JAVASCRIPT
EDIT: It was not clear in my explanation but, my goal was to make the #div ADJACENT to the #container. Like this:
<div id="container"></div>
<div id="div"></div>
I ended up refactoring my html to use #bananabran solution with absolute positioning which simply uses parent-child structure:
<div id="container">
<div id="div"></div>
</div>
You don't have to force the div to follow its container's left margin. Divs naturally start at the top-left of their container (unless otherwise specified or affected by). You also do not need to use Grid or FlexBox. CSS3, and even CSS2 can do this natively.
See working CodePen example: https://codepen.io/bananabrann/pen/QWWdXQZ
Assuming you have no other code affecting your code...
<div id="container" />
<div id="my-div" />
#container {
background-color: blue;
position: relative;
margin: 0 auto;
width: 900px;
height: 300px;
}
#my-div {
background-color: red;
position: absolute;
bottom: 0;
width: 500px;
height: 20px;
}
CSS-Grid can do that:
.wrap {
display: grid;
grid-template-columns: 1fr minmax(auto, 400px) 1fr;
/* 400px for demo purposes */
}
.container {
padding: 1em;
background: pink;
grid-column-start: 2;
}
.wide-r {
padding: 1em;
background: lightgreen;
grid-column: 2 / span 2;
}
<div class="wrap">
<div class="container">Container
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, similique, maxime aspernatur dolorum quod recusandae possimus fuga blanditiis laudantium delectus quis magni. Veniam, consequuntur dolores facilis cupiditate fugiat ullam aspernatur!
Corporis excepturi quos esse voluptatem voluptatibus corrupti ea, tempora culpa magni, hic aspernatur pariatur molestias itaque doloremque assumenda ad fugiat!</p>
</div>
<div class="wide-r">Wide Right</div>
</div>
Like at picture above I need such layout. DIV1 contains static text and to DIV2 data (text) coming from other files (EX.JSON) so it's variable. The point is to keep both divs always with same height based on height of heigher div.
Note: I don't want this with float.
Image courtesy: One of Test I Given Online.
Hi
You can do this easly with CSS3 Flexbox like you asking.
Solution
Here is snippet with working example. I used Flexbox and detalils you have in comments in the code.
#main {
/*Styles for sample presentation*/
padding: 20px;
border: 1px solid tomato;
}
#wrapper {
display: flex;
flex-flow: row wrap;
/* The remaining place (horizontaly) will be spread out around divs in wrapper. */
justify-content: space-around;
/*Styles for sample presentation*/
border: 1px solid royalblue;
}
#wrapper>header {
/* To keep header 100% width. */
flex: 0 0 100%;
text-align: center;
/*Styles for sample presentation*/
background-color: sandybrown;
}
#wrapper>div {
margin: 10px;
padding: 20px;
/* To center the text vertically. */
display: flex;
flex-flow: column nowrap;
justify-content: center;
/*Styles for sample presentation*/
border: 1px solid maroon;
text-align: justify;
}
#text-static {
/*Low flex basis values to keep it next to each other divs*/
flex: 1 0 30%;
}
#wrapper>div#text-json {
/*Low flex basis values to keep it next to each other divs*/
flex: 0 0 25%;
margin-left: 0;
}
<div id="main">
<div id="wrapper">
<header>
Sample header
</header>
<div id="text-static">
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji
druków na komputerach osobistych, jak Aldus PageMaker
</div>
<div id="text-json">
a Lorem Ipsum a Lorem Ipsum a Lorem Ipsum
</div>
</div>
</div>
If you want to try case when right div has more text than left you can edit same snippet as above there.
Knowledge
More informations about CSS3 Flexbox you have e.g. on this W3Schools site.
A nice learning tool that I found recently flexboxfroggy.com .
Hope that was helpful.
Cheers
Here is my implementation using CSS Grid which in my opinion makes this a lot easier especially when working with layouts. I am using SASS for styling. I hope this helps. Here is a link of the snippet on codepen.io
HTML CODE
<div class="main-div">
<div class="wrapper-div">
<div class="sample-header">Header</div>
<div class="div1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta blanditiis, error dolorem, velit tempora, magni ea officiis itaque voluptates aliquid consectetur deserunt quisquam tenetur dolor! Labore assumenda iusto debitis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, velit cumque quaerat optio vero sed dolores maxime dolorum aut itaque? Asperiores, esse. Nihil dignissimos nisi debitis molestiae facilis accusamus non! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto quisquam corrupti error nesciunt pariatur quidem, voluptates similique obcaecati magni aperiam autem aliquam ex, ducimus, distinctio amet labore vel blanditiis sapiente. </div>
<div class="div2">Little bit of text here </div>
</div>
</div>
CSS STYLES USING CSS GRID
.main-div{
border:1px solid #000;
width:500px;
margin:0 auto;
padding:10px;
.wrapper-div{
display: grid;
grid-gap: 10px;
grid-template-columns: 3fr 1fr;
background-color: #fff;
// align-items:center;
color: #444;
margin:10px 0;
.sample-header {
grid-column: 1 / 3;
grid-row: 1;
background-color:lightgrey;
padding:10px;
text-align:center;
}
.div1,.div2{
border:1px solid #000;
padding:10px;
display:grid;
align-items:center;
}
.div1 {
grid-column: 1 ;
grid-row: 2 ;
}
.div2 {
grid-column: 2;
grid-row: 2;
}
}
}
https://codepen.io/anon/pen/OQZNgX
On the container for Div 1 & Div 2 apply this CSS
display: flex;
justify-content: center;
And then on the child divs, use flex-basis to specify their width
flex-basis: 75%;
/* and / or */
flex-basis: 25%;
See above code pen link for a working demo!
You can use bootstrap to achieve this... You can see below code for this type of design.
<div class='container'>
<div class='col-md-12 customHeaderclass'>
Your header
</div>
<div class='row'>
<div class='col-md-8'>
Your big content
</div>
<div class='col-md-4'>
Your small content
</div>
</div>
</div>
I hope this code will help you
Thanks & Regards.
I am well aware of the concept of "overflow" in HTML/CSS. But here I am stuck at a very simple issue.
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
}
section {
width: 70%;
text-align: justify;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section</section>
</div>
My wrapper div consists of aside and section.I tried to align them side by side with total width of the container. But it always appear that section overflows.I wonder why? The total width of aside plus section has never crossed width of its wrapper container.It only works if I put overflow:hidden in the section.
All you need to do to overcome the effect of the section overflowing is to set overflow to auto on the section. Now you will not need to set float on the section,...
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
background: green;
}
section {
width: 70%;
text-align: justify;
overflow:auto;
background: red;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.</section>
</div>
but be aware of the fact that if the content (any child elements) of section are extending the boundary of section will cause scrollbars on the section. So keep that in mind. You could as well use overflow:hidden which will work as well in your situation, but then any content that exceeds the boundary of section will be hidden. In case of overflow:hidden you could do the following to prevent this behavior. An example with an image as a child element of section could look like this.
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
background: green;
}
section {
width: 70%;
text-align: justify;
background: yellow;
overflow:hidden;
}
section img {
width:100%;
height: auto;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.
<img src="http://placehold.it/1000x1000" />
</section>
</div>