Well the problem is that I have got an iframe from google maps within a div next to a div with the same css attributes but they are not inline side by side, though they are aligned on top off each other.
div.morecontent_holders {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
float: none;
display: inline-block;
margin-right: 5px;
margin-left: 5px;
margin-top: 0px;
margin-bottom: 5px;
width: 90%;
min-width: 90%;
max-width: 500px;
min-height: 90%;
max-height: 1000px;
border-bottom: dashed 2px blue;
}
div.text1 {
position: relative;
display: inline-table;
float: center;
margin-top: 5px;
margin-bottom: 5px;
width: auto;
height: 200px;
min-width: 200px;
max-width: 500px;
border-left: solid 2px silver;
border-right: solid 2px silver;
background-color: silver;
font-weight: bold;
-webkit-border-radius: 5px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 15px;
font-size: 1.4rem;
}
div.text1:hover {
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
<div id="page_1" class=morecontent_holders>
<div id="page_1" class=text1>
</div>
<div id="page_1" class=text1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75703.03243173788!2d-3.0722340453397394!3d53.634137210407246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b15315eb47ffb%3A0x9464ca1ad2094f88!2sSouthport!5e0!3m2!1sen!2suk!4v1473131011082"
width="200" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
div.morecontent_holders{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
float: none;
display: inline-block;
margin-right: 5px;
margin-left: 5px;
margin-top: 0px;
margin-bottom: 5px;
width: 90%;
min-width: 90%;
max-width: 500px;
min-height: 90%;
max-height: 1000px;
border-bottom: dashed 2px blue;
}
div.text1{
position: relative;
display: inline-table;
float: center;
margin-top: 5px;
width: auto;
height: 200px;
min-width: 200px;
max-width: 500px;
border-left: solid 2px silver;
border-right: solid 2px silver;
background-color: silver;
font-weight: bold;
-webkit-border-radius: 5px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 1px;
font-size: 1.4rem;
}
div.text1:hover{
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
<div id="page_1" class=morecontent_holders>
<div id="page_1" class=text1>
</div>
<div id="page_1" class=text1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75703.03243173788!2d-3.0722340453397394!3d53.634137210407246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b15315eb47ffb%3A0x9464ca1ad2094f88!2sSouthport!5e0!3m2!1sen!2suk!4v1473131011082" width="200" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Related
Need to make lines opposite to each other, now the lines are under each other. Tried a lot of methods but nothing work, please help! Really stuck with that. See the code below and a picture that shows the desired result, idk what to do. Tried to add margin; top; bottom; padding, these methods didn't do anything.
Here's the CSS and HTML:
.crypto-card{
width: 250px;
height: 230px;
background: white;
-webkit-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
-moz-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
box-shadow: 0px 3px 2px 0px rgba(240,240,240,1);
border-radius: 6px;
transition: .3s;
margin-left: 15px;
margin-right: 25px;
margin-bottom: 20px;
border: 1px solid rgb(245, 245, 245);
}
.crypto-card:hover{
transform: translateY(-1px);
-webkit-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
-moz-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
}
.crypto-card .body{
width: 100%;
border-top: 1px solid rgb(240, 240, 240);
padding: 10px;
}
.crypto-card .logo-sprite{
width: 29px;
height: 29px;
margin: 10px;
}
.crypto-symbol{
border-left: 1px solid rgb(220, 220, 220);
padding-left: 10px;
font-size: 1.3rem;
/* font-family: 'Loto', sans-serif; */
letter-spacing: 5px;
text-transform: uppercase;
/* color: #3c3c3c; */
font-weight: 500;
color: rgb(70, 70, 70);
padding-bottom: 4px;
position: relative;
top: 4px;
}
.crypto-card .price-label{
width: 100%;
text-align: left;
color: rgb(190, 190, 190);
font-weight: 500;
font-size: .8rem;
}
.crypto-card .price{
font-size: 1.5rem;
font-weight: 100;
right: -60px;
top: 4px;
text-align: right;
}
<div class="d-flex justify-content-left" style="margin-top: 10px; padding-left: 5%; padding-right: 5%;">
<div class="row" style="">
<div class="crypto-card">
<span>
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" class="logo-sprite" width="16" height="16" alt="Bitcoin">
<span class="crypto-symbol">BTC</span>
</span>
<div class="body">
<span class="price">$3865.58</span>
<div class="price-label"><span class="title">Price</span></div>
<span class="volume">$67,585,868,137</span>
</div>
</div>
But I need it similar to this
Using a display: grid would make this super easy.
Here's and example:
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: auto;
padding: 20px;
}
.card {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 50px 200px;
border: 1px solid #eee;
border-radius: 5px;
}
.card .image {
display: block;
align-self: stretch;
justify-self: stretch;
padding: 5px;
border: 1px solid #eee;
border-top: 0;
border-left: 0;
}
.card .header {
padding: 10px;
border-bottom: 1px solid #eee;
}
.card .side {
border-right: 1px solid #eee;
white-space: nowrap;
display: flex;
align-items: center;
}
.card .side .text {
rotate: -90deg;
translate:-12px 0;
}
.card .content {
padding: 10px;
}
<div class="card">
<img
src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"
class="image"
alt="Bitcoin"
/>
<div class="header">BTC is a scam</div>
<div class="side">
<div class="text">BIG SCAM</div>
</div>
<div class="content">content in here</div>
</div>
Why wont my css styling of background color ,width, and height work on my last div >gameover ?
this first part is my html code:
<head>
<title>Maths Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue">0</span></div>
<div id="correct">Correct</div>
<div id="wrong">Try Again</div>
<div id="question">7x7</div>
<div id="instructionBox">Click on the correct answer</div>
<div id="choices">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
</div>
<div id="startReset">start Game</div>
Im guessing right here below is where it started getting messed up:
<div id="timeremaining">Time remaining:<span id="timeRemainingValue">
60</span> sec</div>
<div id="gameOver">
<p>Game Over!</p>
<p>Your score is __</p>
</div>
</div>
this second part is my css code and only the last style "game over" isn't working;
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
#container {
height: 440px;
width: 550px;
background-color: #9DD2EA;
margin: 100px auto;
/* this line directly above centers the container top and bottom 100px and left and
right to auto so that margin keeps getting
bigger and bigger on both sides till the element is center */
padding: 10px;
border-radius: 20px;
/* above line curves corners of element */
box-shadow: 4px 4px 6px 6px purple;
-webkit-box-shadow: 4px 4px 6px 6px purple;
-moz-box-shadow: 4px 4px 6px 6px purple;
/* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]
*/
position: relative;
}
#score {
background-color: yellow;
padding: 10px;
position: absolute;
left: 475px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
}
#correct {
position: absolute;
left: 240px;
background-color: green;
color: white;
padding: 10px;
display: none;
}
#wrong {
/* line 45 makes it to where this element does not interact with other elements and
other elements behave as if it doesent exist*/
position: absolute;
left: 240px;
background-color: red;
color: white;
padding: 10px;
display: none;
}
#question {
margin: 55px auto 10px auto;
height: 150px;
width: 420px;
background-color: rgb(184, 53, 240);
box-shadow: 0px 4px purple;
font-size: 100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif, sans-serif;
line-height: 150px;
color: black;
border-radius: 5px;
position: relative;
}
#question:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px
}
#instructionBox {
height: 60px;
width: 420px;
background-color: blue;
margin: 1px auto 1px auto;
text-align: center;
line-height: 55px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
border-radius: 5px;
position: relative;
/* transition: all 0.2s; line 71 & 72 with line 77 make the transition happen on click
*/
}
#instructionBox:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px;
}
#choices {
/* background-color: sandybrown; */
height: 100px;
width: 420px;
margin: 10px auto;
color: black;
text-align: center;
line-height: -50px;
margin: 10px auto;
border-radius: 5px;
}
.box {
/*these boxes are within a choices div to help them size together*/
margin-right: 26px;
width: 85px;
height: 85px;
background-color: white;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 80px;
position: relative;
/* with position relative and .box:active { top: 4px; the box moves down 4px}*/
/* transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s; */
}
.box:hover,
#startReset:hover {
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
.box:active,
#startReset:active {
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
}
/* #box1{
margin: 10px 10px;
background-color: red;
width: 30px;
height: 30px;
}
#box2{
margin: 10px 10px;
background-color: white;
width: 30px;
height: 30px;
}
#box3{
margin: 10px 10px;
background-color: blue;
width: 30px;
height: 30px;
}*/
#box4 {
margin-right: 0;
}
#startReset {
/*these boxes are within a choices div to help them size together*/
margin-left: 230px;
width: 100px;
height: 45px;
background-color: rgb(255, 255, 255, 0.5);
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
/* instead of writing these same pargraphs of code just at the element id to the similar
code alrady made like above */
/* #startReset:hover{
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
#startReset:active{
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
} */
#timeremaining {
/*these boxes are within a choices div to help them size together*/
visibility: hidden;
/* display: none; */
margin-left: 10px;
width: 200px;
height: 45px;
background-color: greenyellow;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
this below is the broken part with the >gameover style or gameOver div:
#gameOver {
height: 200px;
width: 500px;
background-color: linear-gradient(blue, green);
font-size: 1.0em;
}
I have this page which is a page for showing a product and what I'm trying to do is to have the image of the product on the right side and on the left side having the name, price and add to cart button. I use vertical align on img so the text goes to top but doing this means I have to use display inline-block so I can't use block to make the texts go one every line. I also tried to use <br> but it makes the text go under the image.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product</div><br>
<div class="price">$59.99</div>
</article>
</body>
And this is what I'm trying to make:
.image{
margin: 0 50px;
float: right;
border: 1px solid black;
width: 100px;
height: 100px;
}
.text{
float: right;
}
<body>
<span class="image">IMAGE</span>
<span class="text">text</span><br>
<span class="text">text</span>
</body>
instead of adding outside div , add it inside.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product<br><div class="price">$59.99</div></div><br>
</article>
just style it
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
font-size: 15px;
font-weight: normal;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name"><h2>name of product</h2><h3 class="price">$59.99</h3></div>
</article>
</body>
Basically I need that article publishing date (1/9/2016) lays or aligns on the bottom inside the container. Right now the date sits just right under the text, but I need it to lay on the bottom of the container. my site is watchathletics.com
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
nt increases.
You can absolute position the element.
In this example I just positioned it at the right-bottom:
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
bottom: 0;
right: 0;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
you can change your class .top_pub_date to:
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
right: 0;
bottom: 0;
}
What you are looking for is
position: absolute;
bottom: 0;
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
My css:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
What i want:
What i get:
Red = absolute header
White = #main with "blue" scrollbars
Green = #content border with the text in it.
I guess it is quite easy to solve but i still couldnt manage after trying for ages :P
Updated/simplified jsfiddle:
http://jsfiddle.net/YAgW2/9/
Your CSS should be:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: auto;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
width:auto;
}
Use the following CSS:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
background-color: green;
}
#content {
white-space: nowrap;
padding: 5px;
color: white;
background-color: red;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
And the following HTML:
<div>
<div id="main">
</div>
<div id="content" style="position:absolute">
Try to extend this text
</div>
</div>
Could you not move #content outside of #main and position it where you want, i.e. on top of #main?
Adding float: left; to #content solves the display issue!