I would like to create two divs, one inside the other with equal padding on all sides of the child. Like so
<div>
<div>Foo</div>
</div>
So that the result looks like
----------------------------
| |
| |--------------------| |
| | | | <---- There is 1em padding on the inner
| | Foo | | container too
| | | |
| | | |
| |--------------------| |
| | <---- This is the window height,
---------------------------- the padding is 1em on all sides;
How do I do this in CSS?
Right now I am stuck on this layout, missing the bottom padding
With this code
<div class="more-padded full-height blue-green fixed">
<div class="more-padded full-height light-tan more-rounded light-border">Foo</div>
</div>
and style
.more-padded {
padding: 1em;
}
.full-height {
height: 100%;
}
.blue-green {
background-color: rgba(153, 204, 204, 1);
}
.light-tan {
background-color: rgba(239, 235, 214, 1);
}
.more-rounded {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
You can use box-sizing:border-box; so that the width and height properties include the padding and border
HTML
<div id="parent">
<div id="child">Foo</div>
</div>
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#parent {
box-sizing:border-box;
height:100%;
padding:1em;
background:hotpink;
}
#child {
height:100%;
background:dodgerblue;
}
Demo
Hi for equal padding use the following code.
Live demo is on http://jsfiddle.net/adarshkr/fqm83gms/5/
html
<div class="outer">
<div class="inner">
<p>Equal padding adarsh</p>
</div>
</div>
css
body{
background:#ddd
}
.outer{
background:#eee;
padding:20px
}
.inner{
background:#000;
padding:20px;
color:#fff
}
.inner a{
color:#fff;
text-decoration:none
}
Ok, now that I am on an actual computer:
I think you want this: (Js Fiddle For Reference)
body,html{
height:100%;width:100%;
}
body{
padding:1em;
}
body >div{
border:1px solid black;
}
Related
Here's my challenge: I have an image of a real property that will be loaded at random in a DIV 200 pixels wide. Accordingly the image will be resized to 200 pixels width and variable height (kept proportional). I have four separate captions that need to go onto the image:
Title
Price
Location
Surface
They need to be positioned respectively on the top center, bottom left, bottom left and bottom right of the picture. So I would have something like:
--------------------------------
| Title |
| |
| |
|Price |
|Location Surface|
--------------------------------
I know that I can overlay text to an image by putting the div in relative position and the text in absolute position, but I only seem to be able to set one position for all text divs below, no matter how many classes I use.
Any advice??
EDIT: Found the solution. For reference, here is the code generated:
<div id="stampRandom">
<img class="stampImg" src="myphoto.jpg">
<div class="title"><span>Title</span></div>
<div class="prix"><span>Location</span><span><br><b>Price</b></span></div>
<div class="surf"><span><b>Surface</span></b></span></div>
</div>
And the CSS:
#stampRandom {
position: relative;
top: 0px;
left: 0px;
width: 200px;
color: #FFF;
font-size: 80%;
}
#stampRandom {
position: relative;
top: 0;
left: 0;
width:200px;
color: #ffffff;
/* text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */
font-size:80%;
}
#stampRandom img {
top:0px;
left:0px;
width:200px;
}
#stampRandom div {
position: absolute;
width: 200px;
}
#stampRandom div span {
background: rgb(0, 0, 0); /* fallback color */
background: rgba(50, 50, 50, 0.7);
}
.title {
top:2px;
width:100%;
text-align:center;
}
.prix {
bottom:0px;
left:0px;
}
.surf {
bottom:0px;
right:0px;
text-align:right;
}
Thanks to all who helped out! I was blocked big time and my code needed a major redo. Fresh shot in the arm!
http://jsfiddle.net/h51xLdzg/
<style>
.img-cont{position:relative;width:200px;}
.img-cont div{position:absolute; background:red}
.img-title{top:0px;width:100%;text-align:center;}
.img-price{bottom:0px; left:0px;}
.img-surf{bottom:0px; right:0px;text-align:right;}
</style>
<div class="img-cont">
<img src="/MyImage.jpg" width="200"/>
<div class="img-title">
Title
</div>
<div class="img-price">
Price Location
</div>
<div class="img-surf">
Surface
</div>
</div>
Think this will help you
I made a quick example of how you can accomplish this. It's not perfect but it works. If you need some other help or different approach let me know
http://jsfiddle.net/hg9r7/134/
<div class="imageWrapper">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="top">TOP</div>
<div class="bot">BOT</div>
<div class="botleft">BOTLEFT</div>
<div class="botright">BOTRIGHT</div>
</div>
CSS example for bottom and bottom left text:
.bot{
position:absolute;
background:red;
text-align:center;
margin:0 auto;
width:100px;
left:50%;
margin-left:-50px;
bottom:0;
}
.botleft{
position:absolute;
background:red;
text-align:center;
margin:0 auto;
width:100px;
left:0;
bottom:0;
}
Salaam,
I want to make an HTML layout like below:
+----------------------+-----+
| upSide | |
|----------------------| |
| |right|
| |side |
| | |
| mainSide | |
| | |
| | |
+----------------------+-----+
Some thing like this:
<div id="rightSide"></div>
<div id="mainFrame">
<div id="upside"></div>
<div id="mainSide"></div>
</div>
where I want to #upSide be over the #mainSide, in other word when you scrolling the #mainFrame, elements which in the #mainSide be visible at behind the #upSide, when the #upSide's background is transparent(e.g. background-color:rgba(0,0,0,0.35)).
Problem is when I set some things like below:
#upSide{
position:fixed;
width: 80%;
}
#rightSide{
width:20%;
float:right;
position:relative;
}
#mainFrame{
height:100%;
overflow:auto;
}
all things true, but the scrollbar(which in the #mainFrame) goes behind the #upSide.
What's your suggestion for this situation?
The scroll bar goes behind #upSide because of the position:fixed that you added.
Try something like this.
<html>
<head>
<style>
#upSide{
height:200px;
width: 80%;
background:blue;
}
#mainSide{
height:800px;
width: 80%;
background:green;
}
#rightSide{
width:20%;
height:800px;
float:right;
position:relative;
background:red;
}
#mainFrame{
height:800px;
width: 80%;
overflow:auto;
background:yellow;
}
</style>
</head>
<body>
<div id="rightSide"></div>
<div id="mainFrame">
<div id="upside"></div>
<div id="mainSide"></div>
</div>
</body>
eftMy html:
<div id="content_living" >
<div id="leftnav">
//only text href
</div>
<div id="show_pics">
//pics: 1, 2, 3 4, - all href with img
</div>
</div>
My CSS:
#content_living {
}
#leftnav{
float:left;
width:200px;
padding-left: 20px;
padding-top: 30px;
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);
}
#show_pics {
padding-top:15px;
padding-bottom: 20px;
overflow: hidden;
padding-left: 10px;
width: auto;
}
What I get:
href1 | pic1 pic2 pic3
href2 | pic4 pic5 pic6
| pic7 pic8 pic9
| pic10 pic11 pic12
But what I want:
href1 | pic1 pic2 pic3
href2 | pic4 pic5 pic6
| pic7 pic8 pic9 pic10
| pic11 pic12 ...
What do I do wrong?
add display:inline to #show_pics
jsfiddle
You can try floating your navigation to the left and then just add a padding to your content div. Should suffice as a dirty solution for your problem.
.left-nav {
float:left;
width:90px;
background:darkgray;
}
.main-content {
padding-left:100px;
}
JSFIDDLE
http://jsfiddle.net/QWhSn/
You're better off putting floated element inside the same parent as the content that is supposed to wrap around it. So remove the div around the pics.
I knocked this up so you could see http://jsfiddle.net/FE3Wj/
That's only my solution:
Give #content_living a width. Than add a float: right; command to the #show_pics id and delete the float: left command from #left_nav. With the width in the #content_living you can control the space between the two div's inside. Hope it works.
Fiddle
I have two Div , one is in table and other , outside of table .
My problem is , as you can see , divOne overflow outside of parent Div .
I want to show like
---------------------
| ---- ---- |
| | | | D2 | |
| | D1 | | | |
| | | ---- |
| | | |
| ---- |
---------------------
Here is my code ,
html
<div class="wrapper">
<textarea rows="12" cols="8" class="divOne">
Division One
</textarea>
<table>
<tr>
<td>
<textarea rows="6" cols="8" class="divOne">
Division Two
</textarea>
</td>
</tr>
</table>
</div>
Css
.wrapper
{
border: 1px solid #999999;
position: relative;
margin: 0px;
padding: 10px;
width: 600px;
background-color: #FCFCFC;
min-height: 50px;
color: black;
border-radius: 8px;
-moz-border-radius: 8px;
line-height:normal;
}
.divOne
{
float:left;
}
http://jsfiddle.net/fNhet/1/
.wrapper {
display: inline-block;
}
The issue over there is that you are using floats but you aren't clearing
.wrapper:after { /* Using a clearfix */
display: table;
content: "";
clear: both;
}
Demo
So, the parent takes the height of the non floated elements... and thus the background doesn't increase.
For more information on float and clear, read my answers here and here.
In your css try addding to your .wrapper
CSS:-
overflow:hidden;
DEMO.This will do the trick.
use display: inline-block; overflow: hidden; width: 50% .. this will give you some additional effect
Add display:inline-block; to wrapper div then you can get the result.....
I got a tag inside a :
#in .css file
div.box {
width: 50px;
height: 30px;
}
#in .html file
<div class="box">
<p>Here</p>
</div>
and it looks like this:
------------
| |
| Here |
| |
------------
but I want to put <p> at the bottom of <div>, like this:
------------
| |
| |
| Here |
------------
How?
add this
div.box {
width: 50px;
height: 30px;
position:relative;
}
div.box p{
margin:0;
padding:0;
position:absolute;
bottom:0;
}