I am relatively new to CSS. I received a lecture on Text Styling (relative unit and absolute). And in the lecture, it was specified in the body tag that the font-size be 120% as the lecturer said most browsers default font-size is 16px (absolute unit).
He went ahead and apply an in-line styling to override the previous declaration, but made use of the “em” unit.
He explained:
2em = 240% = 38px (twice large as the parent element)
0.5em=50%...
I tried what I understood to make a two-column layout…Inserted 2 paragraphs inside a div and floated them left. I made their width 50% of the viewport –it worked fine.
Then I decided to replace the 50% by 0.5em which I think it should be half of the parent element(the div) since a div is 100% by default. I was surprised by the result…
I really don’t understand anymore!
Here is my code:
* {
box-sizing: border-box;
}
div {
background-color: #00FFFF;
margin-bottom: 10px;
}
p {
width: 50%; /* worked fine */
border: 1px solid black;
float: left;
padding: 10px;
width: .5em;
margin-top: 0em;
/* when the p width was 50%, as i scaled the browser everything adjusted...but with 18em it doesn't */
margin-top: 0%
}
#p1 {
background-color: #A52A2A;
}
#p2 {
background-color: #DEB887;
float: left;
}
section {
clear: both;
}
</style>
</head>
<body>
<h1>Two Column Design</h1>
<div>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
<section>This is regular content continuing after the the paragraph boxes.</section>
</div>
Related
I am overlaying some title text on an image, currently using relative/absolute position for one of the elements (doesn't matter which). What I am struggling with is getting the parent div to fully display the content of both, irrespective of which is taller.
Example markup:
.parent {
position: relative;
overflow: hidden;
width: 100px; /* This is only here to force the title text in this example to expand beyond the image height for illustrative purposes. */
}
.background {
width: 100%;
}
.title-text {
position: absolute;
top: 0;
font-size: 32px;
color: blue;
}
<div class="parent">
<img class="background" src="http://www.placebacon.net/200/200">
<div class="title-text">
My Title (which might be quite long)
</div>
<div>
(Assuming I can acheive what I am looking for, the overflow: hidden above would obviously become redundant, but presently without it, the taller element overlaps whatever is below the parent div.)
JSBin here: http://jsbin.com/yixiniwere/edit?html,css,output
How do I get both elements to be fully visible? I can change the mark-up or introduce additional container elements if necessary.
You can overlay elements without using positioning under CSS-Grid. You just assign them the same place in the grid.
.parent {
/* IE10/11 support */
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
margin: 1em auto;
display: grid;
width: 400px;
/* for demo purposes */
grid-template-columns: 1fr;
grid-template-rows: auto;
background: pink;
}
.parent * {
/* IE10/11 support */
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1/2;
grid-row: 1;
color: red;
}
<div class="parent">
<img class="background" src="http://www.placebacon.net/400/200">
<div class="title-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum perspiciatis commodi, adipisci reiciendis quo suscipit! Ratione laborum magnam cumque tempora ab cupiditate delectus, perferendis enim porro impedit nihil architecto, ad consequatur exercitationem
fugiat error debitis molestias itaque, eligendi necessitatibus quae dolore beatae nemo doloremque. Quos voluptate tenetur explicabo beatae nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo est perspiciatis possimus iusto! Voluptatem
facilis blanditiis aspernatur facere animi placeat. Quisquam fuga laudantium cupiditate eos exercitationem neque eius, distinctio consectetur?Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam, ipsum tempora reiciendis, id ea
eveniet placeat necessitatibus deserunt mollitia dignissimos exercitationem aliquam porro quaerat, labore ducimus rerum animi praesentium?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, laboriosam.
<div>
Another option could be to get rid of relative and absolute positioning and only set the 'margin-top' property of the text to the negative value of the background. Example (if the icon has fixed height of 100px you can just set margin top of title-text to -100px):
.parent {
width: 150px;
}
.background {
width: 100%;
}
.title-text {
margin-top:-100px;
width:100%;
font-size: 20px;
}
if the height of the background in not fixed you should be able to get it via javascript and set it there.
js bin example
The non css grid/flexboxy way
.parent {
position: relative;
width: 300px;
margin: 0 auto;
background: #a03;
}
img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.title-text {
position: absolute;
z-index: 10;
}
<div class="parent">
<img class="background" src="https://images.unsplash.com/photo-1472837525377-e96df4f8f34e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b29757bb040fca6a9b0d79cbd31f1119">
<div class="title-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum perspiciatis commodi, adipisci reiciendis quo suscipit! Ratione laborum magnam cumque tempora ab cupiditate delectus, perferendis enim porro impedit nihil architecto, ad consequatur exercitationem fugiat error debitis molestias itaque, eligendi necessitatibus quae dolore beatae nemo doloremque. Quos voluptate tenetur explicabo beatae nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo est perspiciatis possimus iusto! Voluptatem facilis blanditiis aspernatur facere animi placeat. Quisquam fuga laudantium cupiditate eos exercitationem neque eius, distinctio consectetur?Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam, ipsum tempora reiciendis, id ea eveniet placeat necessitatibus deserunt mollitia dignissimos exercitationem aliquam porro quaerat, labore ducimus rerum animi praesentium?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, laboriosam.
<div>
</div>
This question already has answers here:
flex property not working in IE
(5 answers)
Closed 5 years ago.
I have two containers with a width of 50% displayed in a row. In the left container, there is an image. In the right container, there is a title, a text-box with some text and a button displayed in a column. The text-box has a fix width and text with many lines will be hidden. In chrome, mozilla and edge it seems to be fine, but in IE the box does not grow with de content. I think something must be wrong with flexbox. Any ideas? Here is the fiddle: https://jsfiddle.net/oago4ynb/2/
Also a snippet right here:
.wrapper {
display: flex;
padding: 0px 20px 0px;
border: 1px solid red;
}
.image-container {
width: 50%;
position: relative;
overflow: hidden;
padding: 0;
}
img {
height: 100%;
width: auto;
min-width: 100%;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
.content {
width: 50%;
display: flex;
flex-direction: column;
padding: 9px 30px 30px;
}
.text {
flex: 1;
}
p {
overflow: hidden;
height: 100px;
}
<div class="wrapper">
<div class="image-container">
<img src="https://dummyimage.com/hd1080" alt="Image">
</div>
<div class="content">
<div class="title">
<h3>Title</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet
consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing
elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere veroLorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat
optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil
numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!!</p>
</div>
<div class="button">
<button>Click me!</button>
</div>
</div>
</div>
SOLUTION:
The problem was the flex: 1; on the .text class. Internet Explorer has problem with flex and just one value. Other browser understand it, but if you use flex property on IE, you have to write all three values out so the solution will be flex: 1 0 auto; for my issue. You can use also just one value, but then you have to use the specific property, which would be for this case flex-grow: 1;. Both solution will work. FYI: There is also a knewn issue with this example: flex: 1 1 0; or flex: 1 0 0;. All browsers will understand the third value for flex-basis which is in this two cases 0. In IE you have to write 0px, otherways you'll have problems. Here is the fiddle with both solutions: https://jsfiddle.net/oago4ynb/5/
Thanks!
I created a fiddle which is working fine but whenever I am trying to add an extra left padding to lef-col, the other two divs move downside.
What I am expecting is that padding applies to the inner content and the outer boundary of div, but in this case it looks like it is adding to the div calculation. Let me know what I understand incorrectly for passing.
PS - I fixed by applying box-sizing: border-box to left-col . I am looking for e.xplanation for this cause than solution(though alternate solutions are welcome too !!)
Code -
HTML -
<div class="container">
<div class="left-col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
</div>
<div class="mid-col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
</div>
<div class="right-col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
</div>
</div>
CSS -
*, html {
margin: 0;
padding: 0;
}
body {}
.container {
padding: 20px;
overflow: hidden;
}
.left-col, .mid-col, .right-col {
width: 33.3%;
float: left;
}
.left-col {
background: lightpink;
}
.mid-col {
background: lightgreen;
}
.right-col {
background: lightblue;
}
Fiddle - https://jsfiddle.net/km2brd8m/
If you add box-sizing: border-box to left-col it will work, and the reason is that when using box-sizing: border-box the padding is included in the set width.
Updated fiddle
You can also subtract the padding from the width using CSS Calc
.left-col {
width: calc(33.3% - 20px);
background: lightpink;
padding-left: 20px;
}
Updated fiddle
Add the box-sizing: border-box; property to the three columns. This will include the padding it the overall dimensions instead of outside the original dimensions as it is currently doing.
The padding increases the space used by the element, just like margin. border-box makes it use space from the element itself, instead of increasing its size.
You can read more about it here.
I have a bootstrap project with some other CSS that I inherited. I don't want to change any of the existing styles, but I'd like to add a solid-color child div that is flush with its parent on the top, left and bottom edges, and some number of pixels wide (much narrower than the parent).
The parent's classes which I'd like to keep intact are:
.my-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.my-link {
background-color: transparent;
padding: 0;
margin: 0;
border: 0;
position: relative;
}
My naive understanding for how to build the child makes me think the CSS should look like:
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
width: 40px;
background-color: red;
But I still see margins. I've tried several variations changing padding also to no effect. I've seen answers that boil down to display:table-cell (couldn't make that work) or to position:absolute, which makes the child appear outside the parent.
It seems like this ought to be a simple problem, but I'm out of ideas.
display:table-cell; should work but you may need to have display:table; and display:table-row;
You would need to remove the padding from .my-heading and move it into your content div.
See below.
.my-heading {
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
display: table;
}
.my-link {
background-color: transparent;
padding: 0;
margin: 0;
border: 0;
display: table-row;
}
.my-content {
padding: 10px 15px;
width: 100px;
background-color: red;
display: table-cell;
}
.my-content2 {
padding: 10px;
background-color: green;
display: table-cell;
}
and the html
<div class="my-heading">
<div class="my-link">
<div class="my-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, assumenda quis debitis aliquam aut dicta praesentium laboriosam eligendi placeat ipsa sint saepe vitae porro! Excepturi reiciendis illum at alias minima.
</div>
<div class="my-content2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, aliquid, eligendi, dolore nemo corporis iusto est assumenda cupiditate sapiente cumque incidunt excepturi ipsum nisi! Iure quisquam commodi nemo saepe rem autem minima inventore temporibus? Explicabo, reiciendis, ducimus, quasi alias nobis consectetur accusamus fugiat sed in sit vitae vel maiores itaque culpa magni voluptatum rem dicta est beatae ea. Adipisci, quis aliquam autem voluptas architecto quam asperiores ea ducimus provident harum laboriosam enim beatae ipsam tempore alias voluptatibus dignissimos doloremque recusandae a ullam aut error blanditiis odio labore reprehenderit dolore distinctio accusamus? Dignissimos, ipsam ea officiis nesciunt ipsum rem aut veritatis!
</div>
</div>
</div>
I've uploaded the above to bootply http://www.bootply.com/3y7QfF2653
Or you could use height: inherit;
example http://jsfiddle.net/j5umnnLd/
ofc if you set the height in the parent you might need a display : block or display : inline-block depening on your content / element type
Make the child an absolutely positioned element, and give the parent a position of relative so that it properly anchors the child. Then use CSS properties left, bottom, top to move the child against the edges.
I have been trying to learn CSS from the book by Jon Duckett.
I'm learning the concepts of positioning and floats. When I tried to implement them,
<head>
<title>Try</title>
<style type="text/css">
div#container {
width: 400px;
height: 400px;
padding: 5px;
}
div#cont_2 {
width: 800px;
padding: 0px 5px;
right: 7%;
position: absolute;
top: 10px;
}
p {
width: 300px;
}
p#right {
float: right;
}
p#clear {
clear: right;
}
p#cont_2_p {
width: 700px;
}
</style>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nobis aliquam nihil quas soluta nemo ad magnam animi! Veritatis, magnam, vero, pariatur ducimus quibusdam ad sint nostrum architecto natus asperiores odio eum doloremque excepturi expedita veniam tenetur esse sapiente est unde molestiae error et dignissimos dolorem? Rem quas eius nesciunt repellat assumenda temporibus cumque aperiam.
</p>
<p id="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, sint, soluta ab explicabo labore vero placeat porro fugit tempore dolore deleniti libero sit quod reprehenderit.
</p>
<p id="clear">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, ullam.
</p>
</div>
<div id="cont_2">
<p id="cont_2_p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, distinctio, asperiores, maxime amet quidem doloribus repudiandae tenetur quod odio laborum at hic nemo eaque! Vero.
</p>
<p id="cont_2_p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, dolorum, tempore, eveniet distinctio repellendus perspiciatis modi enim saepe officia voluptatem recusandae sed voluptas molestias itaque eius ex reiciendis voluptatum consequuntur architecto molestiae quos esse eaque minima minus velit dolore in voluptate qui vel sequi provident?
</p>
</div>
</body>
or this: http://jsfiddle.net/7qYYT/
it worked well on 100% zoom on a browser but when I zoomed in, the text on the right overlaps the text on the left. How do I overcome it?
It is because of position absolute of div#cont_2
The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
div#cont_2 {
width: 600px;
padding: 0px 5px;
float: right;
right: 7%;
/*position:absolute;*/
top: 10px;
}
And here you have set top:10px that sets the top of this div from 10px of parent element. That make overlapping of the other contents.
And of-course please used class instead of id selector in css. If you want to reuse that. As Id selector should be unique in the markup.
Js Fiddle
Two possible approaches:
Instead of setting a fixed width with pixels, set a relative width for the two containers using percentages:
div#container {
width: 33.333%;
height: 400px;
padding: 5px;
}
div#cont_2 {
width: calc(66.667% - 10px); // taking padding into account, but this won't work IE<=8
padding: 0 5px;
right: 7%;
position: absolute;
top: 10px;
}
Use floats instead of positioning (with relative width, again):
div#container {
float: left;
width: 33.333%;
height: 400px;
padding: 5px;
}
div#cont_2 {
float: right;
width: calc(66.667% - 10px);
padding: 0 5px;
}
There are other less supported methods as well, such as flex-box.
(BTW, don't use 0px; just use 0.)