Height of a DIV-container - html

I've got a problem with DIV-containers.
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>
The inner-teaser should have the height from the teaser-image (250px) + 20px padding. But inner-teaser has only a height of 40px (2 * 20px padding).


Add overflow: hidden to .inner-teaser to force it to take its floating-children height:
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>


You can also use { display: inline-block } for .inner-teaser div.
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
display: inline-block;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>


just add after class class="teaser-text" see demo :demo
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
<div style="clear:both"></div>
</div>
</div>
v style="clear:both">

Related

why margin does not work with component even defined with relative position

My code is as shown below:
xyz.html
<div class='main-container'>
<div class="q-background">
</div>
<div class="q-text">
<div>Order History</div>
</div>
<div class ="q-orders">
</div>
</div>
xyz.scss
.main-container {
height: 100vh;
width: 100vw;
margin-top: -4rem;
.q-background {
float: left;
width: 100%;
height: 14.3vw;
background: url("../../image/i-header-list.jpg") no-repeat;
background-size: contain;
}
.q-text {
position: relative;
margin-top: 1rem;
font-size: 2rem;
text-align: center;
}
.q-orders {
position: relative;
margin-left: 2rem;
float: left;
height: 50%;
width: 50%;
background-color: #ff3;
}
}
now what happens here is margin-top:1rem does not work for q-text even after defining position:relative. So is there anything missing?

The margin-top is working on .q-text, but you set on the parent a margin-top:-4rem. You should avoid a negative value on margin.
.main-container {
height: 100vh;
width: 100vw;
}
.main-container .q-background {
float: left;
width: 100%;
height: 14.3vw;
background: url("../../image/i-header-list.jpg") no-repeat;
background-size: contain;
}
.main-container .q-text {
position: relative;
margin-top: 1rem;
font-size: 2rem;
text-align: center;
top:0;
}
.main-container .q-orders {
position: relative;
margin-left: 2rem;
float: left;
height: 50%;
width: 50%;
background-color: #ff3;
}
<div class='main-container'>
<div class="q-background">
</div>
<div class="q-text">
<div>Order History</div>
</div>
<div class ="q-orders">
</div>
</div>

Creating layout using divs

How to create this html layout using div tags? I'm trying this code. But it is not working. How should i position my leftbottom div? What is wrong on my code? Please help me......... Hurry..... thanks
<html>
<head>
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
}
.leftupper{
width: 350px;
height: 241px;
background: red;
float: left;
clear: right;
}
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.leftbottom{
width: 350px;
height: 200px;
float: left;
background-color: red
}
</style>
</head>
<body>
<div class="container">
<div class="leftupper">
</div>
<div class="gallery"></div>
<div class="leftbottom"></div>
</div>
</body>
</html>

Try to change
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
To
.gallery{
width: 630px;
height: 600px;
background: red;
float: right;
margin-left: 10px;
margin-right: 10px;
}
http://jsfiddle.net/tuekdzph/1/

You should use coloumns like this:
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
overflow: auto; /* clear floats */
}
.left { float: left; width: 350px; }
.right { float: left; width: 630px; }
.left-upper{
width: 100%;
height: 241px;
background: red;
}
.gallery{
width: 100%;
height: 600px;
background: red;
}
.left-bottom{
height: 200px;
background-color: red
}
</style>
Your HTML should look like this:
<div class="container">
<div class="left">
<div class="left-upper"></div>
<div class="left-bottom"></div>
</div>
<div class="right">
<div class="gallery"></div>
</div>
</div>

Clicking on link to an ID on the same page, truncates everything above the ID (fiddle inside)

I created a link to an ID that should send the user to a div located somewhere at the top of the same page.
when clicking this link, it does jump to the #id, but everything inside the containing div of that id, gets truncated.
EDIT:
Ok, here's a fiddle
CSS:
#header {
width: 1080px;
min-height: 80px;
position: relative;
background-color: #badaf6;
margin-left: auto;
margin-right: auto;
}#container {
width: 1080px;
min-height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border-bottom: 0;
overflow: hidden;
background-color: #FDFDFD;
}
#left {
float: left;
width: 700px;
min-height: 700px;
background-color: #fff;
}
#marg {
margin: 11px 20px 10px 18px;
}
#right {
float: left;
width: 380px;
min-height: 700px;
background-color: #fff;
}
#left #box {
margin-top: 0;
margin-left: 0;
background-color: #ECF4FD;
width: 500px;
height: 200px;
}
#left, #middle, #right {
padding-bottom: 999999px;
margin-bottom: -999999px;
}
#space {
margin: 30px 0 40px 4px;
}
HTML:
<body>
<div id="header">
</div>
<div id="container">
<div id="left">
<div id="space">
<div id="box">
</div>
<p><a href="#box">Click</p>
</div>
</div>
<div id="right">
</div>
<br style="clear: left;" />
</div>
</body>

If its okay, you can change your html like this http://jsfiddle.net/xx6jgLsj/1/
<p><a href="#left">Click</p>

Text in the middle of image inside div

Can anyone help me figure out what i'm doing wrong?
I want to insert the text inside "servicesTitle"in the middle of the image.
I have tried position, top, vertical align..and can't figure out what i'm doing wrong
<div class="services">
<p id="titleServices">Our Services</p>
<div class="servicesImages">
<div class="servicesImagesLeft">
<div id="cultureNews">
<div class="servicesTitle">Culture News</div>
<img src="/www/assets/newImages/services/190x136/Culture News1.jpg">
</div>
<div id="meetingPoint">
<div class="servicesTitle">Meeting Point</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
<div class="servicesImagesCenter">
<div id="gallery">
<img src="/www/assets/newImages/services/460x330/Gallery.jpg">
<div class="servicesTitleActive">Gallery</div>
</div>
</div>
<div class="servicesImagesRight">
<div id="profile">
<div class="servicesTitle">Profile</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
<div id="invitation">
<div class="servicesTitle">Invitation
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#clear {
clear: both;
}
.services {
height: 100%;
margin-left: 7.5%;
margin-right: 7.5%;
}
.services p#titleServices {
text-align: center;
color: #ffffff;
padding-top: 40px;
}
.services .servicesImages {
border: 1px solid #fff;
margin-top: 65px;
text-align:center;
}
.services .servicesImages .servicesImagesLeft {
width: 190px;
height: 136px;
margin-top: 20px;
float:left;
position: relative;
}
.services .servicesImages .servicesImagesCenter {
display: inline-block;
margin: 0 auto;
width: 460px;
height: 330px;
}
.services .servicesImages .servicesImagesRight {
width: 190px;
height: 136px;
margin-top: 20px;
float:right;
position: relative;
}
.servicesImagesLeft #cultureNews {
width: 100%;
height: 100%;
}
.servicesImagesLeft #meetingPoint {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesCenter #gallery {
width: 100%;
height: 100%;
}
.servicesImagesRight #profile {
width: 100%;
height: 100%;
}
.servicesImagesRight #invitation {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesLeft img, .servicesImagesRight img {
opacity: 0.7;
}
.servicesTitleActive {
text-align: center;
margin-top: 25px;
color: #fff;
}
.servicesTitle {
color: #fff;
}

.services p#titleServices {
Needs to be:
.services .servicesTitle {

.servicesTitle {
color: #fff;
width: 100%;
height:100%;
position: absolute;
top:60%;
left:auto;
z-index:2;
}
http://jsfiddle.net/uHY7C/

Centering section

I got problem with centering the div #offer within the section .tight. I don't want to use position: absolute; because of possibility of correct displaying site in 1024px width screens.
Here's the HTML:
<section class="main">
<section class="tight">
<div id="offers">
<article class="offer">
<div id="offer_stats"></div>
text
</article>
<article class="offer">
<div id="offer_comp"></div>
text
</article>
<article class="offer last">
<div id="offer_time"></div>
text
</article>
</div>
</section>
</section>
And the CSS:
section.main {
min-width: 880px;
max-width: 1200px;
margin: 0 auto;
}
section.tight {
width: 100%;
margin: 0 auto;
float: left;
}
#offers {
float: left;
padding-bottom: 100px;
text-align: center;
}
article.offer {
float: left;
min-height: 178px;
width: 260px;
color: #59535e;
padding-right: 50px;
}
article.offer.last {
padding-right: 0;
}
article.offer div {
height: 178px;
}
#offer_stats {
background: url("../images/offer_stats.png") no-repeat;
}
#offer_comp {
background: url("../images/offer_comp.png") no-repeat;
}
#offer_time {
background: url("../images/offer_time.png") no-repeat;
}
The printscreen:
Any suggestions?

section.main {
width: 880px;
max-width: 1200px;
margin: 0 auto;
}

First, i suggest you to remove float: left; from #offers
#offers {
padding-bottom: 100px;
text-align: center;
}
Second, i suggest you to use display: inline-block; instead of float: left; in article.offer
article.offer {
display: inline-block;
min-height: 178px;
width: 260px;
color: #59535e;
padding-right: 50px;
}
See this jsfiddle