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.)
Related
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>
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 have an issue on a test web-page i'm creating for practice where i have two div elements one above the other, however the top one (.item in the CSS) is 'under lapping' the bottom one (.wide and .img-span in the css) and sticks out on the other-side for some reason. I have fiddled around with my CSS and HTML for a while and i cant fix it.
CSS:
.item {
padding-left: 20%;
padding-right: 20%;
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
margin: 0;
}
.item p {
font-size: 18px;
}
.img-span {
padding: 0;
margin: 0;
width: 100%;
}
.wide {
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
}
HTML:
<div id="first" class="item">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum!
</p>
</div>
<div id="img-span">
<img src="img/board-911636.jpg" class="wide">
</div>
Setting display: block on the img fixes your problem.
I have a footer right now that will stick to the bottom of the page but when it runs up to content it will sit over top of it. I obviously want it to be pushed down by whatever container content it comes next to.
Here is a screenshot:
I would like the bottom of that table to push it down. Here is my CSS and HTML
BODY AND CONTAINER CSS
body {
color: $base-text-color;
margin: 0;
padding: 0;
background-color: $base-background-color;
}
.container {
max-width: 1200px;
margin: 18px auto 0;
text-align: center;
margin-bottom: 40px;
}
FOOTER CSS
.footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
APPLICATION HTML
<body>
<%= render 'shared/top_bar' %>
<div class="container">
<%= render 'shared/errors' %>
<%= yield %>
</div>
<%= render 'shared/footer' %>
</body>
I'm really stumped by this one and can't seem to find the answer! All help would be great thanks!
What you want is a sticky footer and not a fixed one. Fixed, the content will not push it. Sticky, it will remain at the bottom until it's pushed by content. Please beware that inserting a padding into the footer affects it's size and you have to adjust other measures for this to work correctly.
Please note that I added a padding of 20px to the .container so I had to increase 40px on the bottom margin and on the .push div.
I would also advise that you should use Footer element instead of a div .footer
Here is the code
CSS
html, body {
height: 100%;
margin:0;
padding:0;
}
.container {
max-width: 1200px;
text-align: center;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
overflow: auto;
padding:20px;
}
.push {
height: 80px;
margin-top: 0;
}
.footer {
height: 40px;
margin-top: 0;
width: 100%;
background: red;
border: 0;
}
HTML
<body>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam
<div class="push"></div>
</div>
<div class="footer">Footer</div>
</body>
http://codepen.io/luisalves/pen/ggZWGv
i have added css in your code from line 6
as your footer's height is fixed i have leveraged that fact
please read it and comment if you dont understand
body {
color: black;
margin: 0;
padding: 0;
background-color: green;
/*magic is here */
box-sizing: border-box;
min-height: 100vh;
position: relative;
padding-bottom: 40px;
/*magic ends here */
}
.container {
max-width: 1200px;
margin: 18px auto 0;
text-align: center;
margin-bottom: 40px;
}
.footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
lorem*10
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.</div>
<div class="footer">i am here</div>
</body>
</html>
try adding different div for footer...
something like this
<html>
<body>
<form id="form1" runat="server">
<div>
..some code..
</div>
<div id="footer">
<p align="center">Copyright ©</p>
</div>
</form>
</body>
</html>