On our website, we have a container, with a DIV box inside which leaves a space along the right hand side so we can add some more boxes with images / text.
I got as close as the boxes to the right hand side but underneath the "main" div.
http://jsfiddle.net/Ug5pz/2/
Thanks!
CSS:
#container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto 0;
background: #FFF;
border-style:solid;
border-width:2px;
}
#main {
position:relative;
width: 450px;
height: 300px;
border-style:solid;
border-width:2px;
}
#sidebox {
position:relative;
width:120px;
height:50px;
float:right;
border-style:solid;
border-width:2px;
}
HTML:
<div id="container">
<div id="main">Welcome to our website!</div>
<div id="sidebox">Sidebox</div>
</div>
Try adding float:Left to the #main CSS
Alternatively you could modify the #sidebox CSS as follows:
position:absolute;
right:0px;
top:0px;
Related
This question already has answers here:
div under another div
(6 answers)
Closed 7 years ago.
I am making a page and I need one div block to go under the other. I have a lot of different color divs, and when I use margin-top:100px(for example) for one div, and margin-top:200px for other div it looks ok on my computer but on the lap top completely different
--- 1st and 2nd divs are in the right place, but I have to put the 3rd one below the 2nd div. How can I do that?
Here is the pic:
Try setting your divs to "position:relative", then set z-index properties. The lower it's set the farther it's displayed...
Example :
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
Then your css :
.div1 {
position:relative;
z-index:1;
width: 100%;
height: 300px;
background-color: #eee;
}
.div2 {
position:relative;
z-index:2;
margin-top: -100px;
width: 100%;
height: 300px;
background-color: #f90;
}
.div3 {
position:relative;
z-index:3;
margin-top: -100px;
width: 100%;
height: 300px;
background-color: #ccc;
}
#container{
width:500px;
}
.innerdivs
{
width:100%;
float:left;
}
<div id="container">
<div class="innerdivs" style="background-color:#4C4C4C;"><h1>first div</h1></div>
<div class="innerdivs" style="background-color:#0087DE;"><h1>2nd div</h1></div>
<div class="innerdivs" style="background-color:#FFFF00;"><h1>3rd div</h1></div>
</div>
that is working perfectly in here
CSS
#wrapper{
width:100%;
max-width:460px;
}
.inline-divs
{
width:100%;
display:inline-block;
}
#div1{
height:50px;
background-color:#ff0000;
}
#div2{
height:150px;
background-color:#00ff00;
}
#div3{
height:300px;
background-color:#0000ff;
}
HTML
<div id="wrapper">
<div class="inline-divs" id="div1"></div>
<div class="inline-divs" id="div2"></div>
<div class="inline-divs" id="div3"></div>
</div>
JSfiddle Demo
https://jsfiddle.net/1tuj0c9a/2/
Hope you find this helpful!
I have added 3 different Div's with different colors one after another with 100% width. So it works without overlapping div's in mobile screens as well.
#container {
width:100%;
display:block;
}
.content1 {
width: 100%;
height: 100px;
background:pink;
display:flex;
}
.content2 {
width: 100%;
height: 100px;
background: blue;
display:flex;
}
.content3 {
width: 100%;
height: 100px;
background: yellow;
display:flex;
}
http://jsbin.com/nonufehuja/4/edit
If you want to add margin to entire page container
#container {
width:100%;
display:block;
margin-top:100px
}
http://jsbin.com/nonufehuja/5/edit
Margin for second div
.content2 {
width: 100%;
height: 100px;
background: blue;
display:flex;
margin-top:100px;
}
http://jsbin.com/nonufehuja/6/edit
Try to use CSS z-index property
For example, in styles, for div1 you should add
position:relative;
z-index:1;
For div2
position:relative;
z-index:2;
For div3
position:relative;
z-index:3;
I have a confirm box and I want to show it in the middle of my screen.
margin 0 auto does not solve my problem.
How can I center it?
https://jsfiddle.net/y5u5obL0/
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
It's because the element is fixed.
You need to add left: 0;/right: 0 in order for the element to be centered (in combination with margin: 0 auto). In doing so, the element technically stretches to fill the screen, but since it has a width specified, it will be contained and centered within the available space.
Updated Example
#confirmBox {
position:fixed;
left: 0;
right: 0;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
Use the following code to vertically and horizontally center anything, change relative to absolute if you want to remove it from the page flow. Check out the demo to see it in action
(Demo)
HTML
<div class="wrap">
<div class="mycontent">
Hello World!
</div>
</div>
CSS
.wrap {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
max-width: 100%;
max-height: 100%;
}
Margin: 0 auto; will not work until you will not provide left:0; and right:0
check fiddle for working example :https://jsfiddle.net/nileshmahaja/y5u5obL0/1/
CSS
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
left:0; /* Added Property */
right:0; /* Added Property */
}
I have a div. Inside this div are 2 smaller divs. I want one of the smaller divs to have overflow:visible, and the other to have overflow:hidden. Can't figure out what selectors allow me to do this, I think I'm missing something super simple.
edit Sorry, let me rephrase that: I want the main div to have the style overflow:visible only applied to one of the child divs, while the main div also has the style overflow:hidden apply to the other.
Example:
http://jsfiddle.net/3fQBt/
<div id="body">
<div id="visible">This div should be visible.</div>
<div id="hidden">This div should be hidden.</div>
</div>
#body{
width:300px;
height:300px;
margin:20px;
position:relative;
float:left;
overflow:visible;
}
#visible{
width:100%;
height:100px;
margin-left:-20px; //this should overflow visibly
position:relative;
float:left;
}
#hidden{
width:100%;
height:100px;
margin-left:-20px; //this should be hidden
position:relative;
float:left;
}
something like this should get you going in the right direction.
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden-box">
<div id="hidden">This div shouldn't.</div>
</div>
</div>
#hidden-box {position:relative;overflow:hidden;height:100%;width:100%;}
Here's a couple of solutions:
HTML:
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden1">This div shouldn't.</div>
<div id="clip">
<div id="hidden2">This div shouldn't.</div>
</div>
</div>
CSS:
/* solution 1 uses text-indent to create the clipping and a red block to cover the excess background blue on the right */
#hidden1 {
width:100%;
height:100px;
background-color:#00f;
color:#fff;
text-indent: -20px;
position:relative;
float:left;
}
#hidden1:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background-color: red;
}
/* solution 2 uses a second div with overflow: hidden to clip the text to get around the parent div's overflow: visible */
#clip {
overflow: hidden;
position:relative;
float:left;
width: 100%;
}
#hidden2{
width:100%;
height:100px;
background-color:#00f;
color:#fff;
margin-left:-20px;
position:relative;
float:left;
}
Fiddle here
Can't you reduce de width of the second div and remove the negative margin-left like this:
#hidden{
width: calc(100% - 20px);
height:100px;
position:relative;
float:left;
}
Demo
EDIT: Added calc() on CSS
You could do something like this, although it's pretty brittle, so not much use in the real world:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin: 0;}
#body{
width:300px;
height:300px;
background-color:#f00;
margin:20px;
position:relative;
overflow:hidden;
border:solid 1px #000;
}
#visible{
width:300px;
height:100px;
background-color:#0f0;
position:fixed;
left: 0;
}
#hidden{
width:300px;
height:100px;
background-color:#00f;
color:#fff;
position:absolute;
top: 100px;
left: -20px;
}
</style>
</head>
<body>
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden">This div shouldn't.</div>
</div>
</body>
</html>
TRY this,
#hidden {
width: 100%;
height: 100px;
background-color: #00F;
color: #FFF;
/*margin-left: -20px; <--- remove this*/
position: relative;
float: left;
overflow: hidden !important;/*add this*/
}
I'm try to create a side by side div that have 100% height, i manage to get the first div working but the second one is cause problem, been trying to do this for the last 3 hours.
#mainWrapper{
width: 900px;
margin:0px auto;
background:#fff;
}
/*leftColumn */
.leftColumn {
float:left;
width:250px;
height:100%;
background:#fafafa;
border-left:solid 1px #dedede;
position:fixed;
top:0px;
}
/* Content */
.mainContent {
float: left;
width: 650px;
height:100%;
background:#fff;
margin-left:252px;
padding-bottom: 50px;
}
example of how it's supposed to look like
http://i49.tinypic.com/ycef7.jpg
how it looks like at the moment.(tried everything dunno how to fix it)
http://i49.tinypic.com/2ryk5eo.png
Rather than giving explicit height to both the inner divs floated left, you should use overflow:hidden; on parent div, e-g:
#mainWrapper{
width: 900px;
margin:0px auto;
background:#fff;
overflow:hidden;
}
Add
html, body {
height: 100%;
}
(http://jsfiddle.net/zYWjJ/2/)
Looking at my attached image, I am trying to get the darker rectangle shape, containing an image (with red border), to be aligned at the bottom center of the lighter grey square.
I have tried setting the dark rectangle to position:absolute with a 0px bottom but then I lost my center alignment using margin:0 auto. I've also tried just using a vertical-align:bottom but still won't play ball!!!
What is the CORRECT way of doing this? One thing to bare in mind is that where I have used the sizes 170 x 105, these are actually unknown as they are dynamically produced elements, size is variable.
This is my code so far:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; }
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; }
<div class="gallery_item">
<div class="item_preview">
<div class="item_preview_img_wrap">
<img src="asf.jpg">
</div>
</div>
<div class="item_options">
options
</div>
<div class="item_info_header">
<div class="date">Date</div>
<div class="item">ID</div>
<div class="clear"></div>
</div>
<div class="item_info_main">
<p class="caption">Caption here</p>
<p class="subject"><strong>People:<strong> People here</p>
</div>
</div>
If you want to display image at bottom of light grey box then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Note: -halfofimagewidth is half of size of your image for example if your image is 100px and border is 5px then it should be -55px
If you want to display image at bottom of dak grey box at center then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Let me know if you still find any issue
Is the width of the inside box always going to be relative to the outer box? If so you could use a percentage for your left value like so...
http://jsfiddle.net/hcharge/zYprr/
Write like this:
.item_preview_img_wrap {
width:170px;
height:105px;
position:absolute;
left:50%;
margin-left:-85px;
bottom:0;
background:#CCC;
}