I'm trying to build a page with a big div in the middle which "lays" on to other divs on the left and on the right with the code at the end of the question. the three divs should be contained in a further div (called outer) and it's height should be (almost) exactly the height of the div in the middle. Because the height of the div in the middle is not fix this is true forthe outer div as well.
Trying to use relative positioning sets my middle-div below the ones on the left and the right. Setting th etop of the middle div leaves a blank area between the middle div and the lower border of the outer div. Using absolute positioning results in a collapsed outer div.
I would be greatful for any hint or advise.
parascus
<html>
<head>
<style type="text/css">
#outer {
width:300px;
border:1px solid #000000;
}
#left {
position:relative;
display:inline-block;
float:left;
margin:3px;
width:50px;
border:1px solid #C08080;
}
#right {
position:relative;
display:inline-block;
float:left;
left:185px;
margin:3px;
width:50px;
border:1px solid #C08080;
text-align:right;
}
#middle {
background-color: #FBE6AD;
display: inline-block;
overflow: hidden;
position: relative;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
left: 50px;
top: -48;
width: 200px;
}
</style>
</head>
<body>
<div id='outer'>
<div id='left'>DIV Left</div>
<div id='right'>DIV Right</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
</div>
</body>
</html>
It should look like this:
But I get this:
Or this:
The solution (triggered by fenix) was:
<html>
<head>
<style type="text/css">
#outer {
border:1px solid #000000;
display:inline-block;
width:300px;
}
#x {
display:table-row;
}
#left {
background-color: #c0c0c0;
position:relative;
display:inline-block;
float:left;
margin:3px -5px 0px 3px;
width:50px;
border:1px solid #C08080;
padding:0px;
}
#right {
background-color: #c0c0c0;
position:relative;
display:inline-block;
float:left;
margin:3px 3px 0px -5px;
width:50px;
border:1px solid #C08080;
text-align:right;
}
#middle {
background-color: rgba(250, 220, 200, 0.8);
display: inline-block;
float:left;
overflow: hidden;
position: relative;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
width: 200px;
margin:3px 0px 6px 0px;
z-index:10;
}
</style>
</head>
<body>
<div id='outer'>
<div id='x'>
<div id='left'>DIV Left</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
<div id='right'>DIV Right</div>
</div>
</div>
</body>
</html>
This ends in:
Have you considered a table with three cells in one row? Not entirely sure what the content will be, but that might be an alternate route?
Would this be on only one page? Or across multiple pages? If across multiple pages then you could utilize a Master page with the relevant styling reflecting ContentPlaceHolders?
The purpose of position:relative is to set the origin point for absolutely-positioned children elements.
Therefore, only the outer element needs position:relative, the inner elements need position:absolute (along with top, left or bottom, right positioning).
Absolutely-positioned elements are also removed from the layout flow, so inline-block and float should be removed since it has no layout context.
Give this a try:
#outer {
width:300px;
border:1px solid #000000;
position:relative;
min-height:200px
}
#left {
float:left;
margin:3px;
width:50px;
border:1px solid #C08080;
}
#right {
float:right;
left:185px;
margin:3px;
width:50px;
border:1px solid #C08080;
text-align:right;
}
#middle {
background-color: #FBE6AD;
overflow: hidden;
position: absolute;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
left: 50px;
top: 0;
width: 200px;
}
Related
Im trying to center a box 200 by 200. I have tried using left:50% top:50% etc., but this is somehow not really working.
I created a fiddle to recreate my problem: https://jsfiddle.net/8k9o9Lvv/2/
I also tried to center the text from the top as well, with text-align:center and this is also not working.
Any ideas why this is not working?
HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
CSS
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
right:50%;
}
Just margin:0px auto; is enough
#container {
width: 100%;
}
.slider-text {
text-align: center;
margin:0px auto;
height: 200px;
width: 200px;
border-left: 1px solid red;
border-right: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
<div id="container">
<div class="slider-text">
<h2>Test
</h2>
</div>
</div>
Give the below code a try, centering the #container div horizontally, and the .slider-text div horizontally and vertically within #container.
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border:1px solid red; /* Creates a border around entire element */
margin: auto; /* Centers horizontally */
}
/* This is to center the text vertically within its parent, */
/* remove it if you don't want to do that */
.slider-text h2 {
text-align:center;
position: absolute; /* position: relative; works too */
width: 100%;
top: 30%;
left: 0%;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Let me know if it helps.
* {
margin: 0;
padding: 0;
}
#container{
position:relative;
width:100%;
height: 100vh;
}
.slider-text {
position: absolute;
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
right:50%;
display: flex;
align-items: center;
justify-content: center;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
You need to set the height of the container. In this case I used 100vh which is equal to 1 viewport height. transform: translateX(-50%) translateY(-50%); with top: 50%; left: 50% will make your .slider-text on center.
To center your text. You can use flexbox. Using display: flex will enable you to use align-items and justify-content. With value of center, it will allow your text to flow on center of its parent.
Your HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Modified CSS
#container{
width:100%;
}
.slider-text {
position:relative;
height:200px;
width: 200px;
border:1px solid red;
margin: 0 auto;
}
.slider-text h2 {
width: 100%;
text-align: center;
}
#container{
width:100%;
position: relative;
}
.slider-text {
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
position: relative;
}
/*since slider-text has a fixed height and width, a simple math would do*/
.slider-text h2 {
margin-top: 90px;
}
<div id ="container">
<div class="slider-text"><h2>Test
</h2></div>
</div>
Just a simple calculation would do
You should set height:100% to all elements down to your container. That means:
html, body, #container
{
height:100%;
}
Then to center horizontaly and verically a known-size div inside your #container, you just need to set for that div:
left:50%;
top:50%;
and
margin-left:(MINUS whatever is the half of your div width)
margin-top:(MINUS whatever is the half of your div height)
UPDATED FIDDLE (sorry forgot to "update" it)
edit: i assumed you want to center it to the whole screen.
Assuming you want to center it both X and Y, you're right so far, however there are a few changes. Use this for your .slider-text class:
.slider-text {
text-align:center;
position:absolute; /* Relative was wrong */
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
Relative positioning was incorrect in this instance. absolute is correct. Relative would make it move X amount of pixels from its natural position, whereas absolute will position it in a specific place, relative to the closest parent with position: relative on it.
The transform basically does the same as negative margins, but you don't need to change the margin if the size of the box changes :)
Let me know if you have any questions.
Here is the css code:
.slider-text {
text-align:center;
position:absolute;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
margin-left:-(div width)/2;
margin-top:-(div height)/2;
Good morning guys. I just want to know how to do this in html and css. :)
I've done this so far in my website.
I've been working for this for days but I can't find an exact way to do it that way.
This is my html code:
<div class="container">
<div class="col-md-2 col-md-offset-1"><img class="img-circle img-left" style="border: 5px solid #0766dc;" src="1.png"></div>
<div class="col-md-2" id="gradient1"></div>
<div class="col-md-2"><img class="img-circle img-center" style="border: 5px solid #00afdc;" src="2.png"></div>
<div class="col-md-2" id="gradient2"></div>
<div class="col-md-2"><img class="img-circle img-right" style="border: 5px solid #28ddb3;" src="3.png"></div>
</div>
and this is my css:
#gradient1 {
display: block;
background: linear-gradient(to right, #0766dc, #00afdc);
height: 5px;
margin-top: 100px;
}
#gradient2 {
display: block;
background: linear-gradient(to right, #00afdc, #28ddb3);
height: 5px;
margin-top: 100px;
}
.img-center {
margin: auto;
}
.img-right {
margin-right: auto;
}
.img-left {
margin-left: auto;
}
.img-circle {
display: block;
padding: 10px;
border-radius: 50%;
width: 200px;
height: 200px;
}
This is a simple code that works. You will have to resize the elements to your desired size, recolor, etc.
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 2</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 3</p></div>
When resizing, make sure that you make the border radius the same as your height and width size. Note that the line div height is half the circle div height.
Your code when I run it does not look like the picture provided. The lines are almost halfway inside the circle to their left.
You can try something like this:
<div class="circle"></div><div class="line"></div><div class="circle"></div>
.circle {
height: 100px;
width: 100px;
border: 4px solid black;
border-radius: 50%;
display: inline-block;
box-sizing: content-box;
}
.line {
display: inline-block;
border-top: 4px solid black;
width: 100px;
height: 50px;
box-sizing: content-box;
}
Make sure you have no spaces between html inline or inline-block elements.
Add circles and change the sizes, colors, etc. at will. You'll probably want to wrap it all in a div with a minimum width so that the elements don't wrap when the screen gets small.
You were so close! :) But for custom things like this bootstrap is very unflexible, so sometimes you have to overwrite some properties.
So, problem is that bootstrap sets a padding on it's elements, that is the reason of the space between your circles:
To solve this issue just make a new class:
<div class="col-md-2 outer">
And apply the style like this:
.outer {
padding:0;
}
Another problem I see in your code is that you set the image width and height manually. But the divs with the class col-md-2 adjust their size depending on the screen size. So resizing can result in overlapping.
So you have to think about, if you set also the width / height of .outer to static values. To prevent this you can at least set the min-height and min-width of the div that have the circle inside.
Check out the solution on jsfiddle:
https://jsfiddle.net/w58L7ojL/ (zoom out to see it working)
I use CSS to style aside. After applying this style, aside moves to left but I want it at the right of the page. I want aside to have a height that is relational to the container. i.e. I want its bottom margin to touch the top of the footer no matter what is the height of the container.
Style:
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
position:absolute;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
Remove position: absolute;. If you want to keep position: absolute; you can add right: 0; instead.
html,body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
height: 100%;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
<aside>I'm at the right side</aside>
As Gustaf said, you have to remove the 'position: absolute' to switch the side. To define the height, all the parents of element, needs to have a defined height, so the children element will have a reference to render your own height, like this:
html, body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
height: 100%;
}
<html>
<head></head>
<body>
<aside>I'm at the right side</aside>
</body>
</html>
I have a basic HTML page where everything is wrapped inside a mainWrapper div and secondWrapper div.
everything is set to 960px size (the pageHeader, the pageContent and pageFooter).
I need to keep everything 960px apart from the pageFooter.
This is my CSS code:
<style type="text/css">
<!--
body {
}
#secondWrapper {
margin-left:auto;
margin-right:auto;
width:960px;
min-width:910px;
}
#mainWrapper{
margin-left:auto;
margin-right:auto;
width:960px;
}
#pageHeader {
height:80px;
width:100%;
min-width: 918px;
border-bottom: solid 1px #ededed;
z-index:1000;
position:relative;
}
#pageContent {
clear:both;
width:100%;
min-width: 918px;
background-image:url(img/map.png);
height:600px;
background-repeat:no-repeat;
background-position:center;
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
z-index:1;
}
#pageFooter {
background-color:#CCC;
width:100%;
min-width: 918px;
}
#logo{
position: absolute;
margin-left:29px;
background-color:#cb202d;
width:120px;
height:110px;
top: 0;
text-align:center;
vertical-align:center;
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#FFF;
font-weight:bold;
float:left;
z-index:1000;
-webkit-box-shadow: 0 5px 6px -6px grey;
-moz-box-shadow: 0 5px 6px -6px grey;
box-shadow: 0 5px 6px -6px grey;
}
#logoTxt{
position: relative;
top:26%;
}
#yourCurrentTime{
float:left;
left:220px;
top:10%;
position:relative;
border: 10px solid #1abc9c;
border-radius:4px;
}
#arrow-down {
position:absolute;
width: -23px;
height: 2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1abc9c;
left: 99px;
top: 30px;
}
#b {
position:absolute;
width:200px;
height:115px;
z-index:10000000;
left: -59px;
top: 48px;
background-color:#333;
display:none;
}
div#a:hover div#b {
display: inline;
}
div#a:hover {
background-color:#eceded;
cursor:pointer;
}
div#divBtn:hover {
background-color:#4a4a52;
cursor:pointer;
}
div#a{
width:140px;
height:47px;
position:absolute;
left: 825px;
top: 0px;
}
-->
</style>
I did try a few solutions found on Google and stackoverflow like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
but that didn't work for me!
Any help would be appreciated.
Here is the Jsfiddle: http://jsfiddle.net/crf121359/jwgfH/
You need to do it like this:
HTML
<div class="wrap">
<div class="wrap_inner>
<!-- Pwraput here your pageHeader and pageContent -->
</div>
</div>
<footer>
</footer>
CSS
.wrap {
position: relative;
min-height: 100%;
padding-bottom: 200px /*footer height*/
}
.wrap_inner {
width: 960px;
margin: 0 auto;
}
footer {
width: 100%;
height: 200px;
position: absolute;
left: 0;
bottom: 0;
}
You just need to take your pageFooter outside of the wrapper.
Here's a working example:
http://jsfiddle.net/jwgfH/3/
You should see how it looks here, not inside the little frame:
http://jsfiddle.net/jwgfH/3/show
width: 100%;
only works if the parent element has a width defined.
Try giving your body element a max-width and see if that works
can you show your html too ? if the parent div or container is having 100% width then it should show the perfect result.
If you want to create a webpage that's 960px wide, define it in your <body> tag's by placing width:960px; in the CSS.
Then, use width:100%; in the rest of your elements - only for those that you want to display as 960px. The rest can be divided by using width:50%;, width:25%;, which is 50% of 960px and 25% of 960px respectively.
Also, height:100% is negligible, the rest of the elements will automatically define the height of the webpage, as long as you place them correctly.
In short, do this:
body {
width:960px;
margin:0 auto;
}
#secondWrapper {
width:100%;
float:left;
}
...and so on and so forth.
(NOTE: To solve your positioning problem, float:left is probably the best way to go. Use it on most of the elements you need to position accurately. If not, the browser will estimate where it will go.)
AFTER EDIT:
If you want a 960px gap between the #pageContent and #pageFooter, you can always define a margin-top like this:
#pageFooter {
margin-top:960px;
}
I have div callad subHeader inside I have:
1 - subHeaderLeft
2 - subHeaderRight
when i displayed to browser the subHeaderLeft/right are out from subHeader and not inside.
why the subHeaderLeft/right are out side from subHeader ?
You can see Demo jsFiddle.
Thanks for any help.
html code:
<div id="subHeader">
<div id="subHeaderLeft"></div>
<div id="subHeaderRight"></div>
</div>
css code:
#subHeader{
width: 200px;
height:100px;
Helvetica, sans-serif;
margin: 10px auto;
border: 3px solid #6fb2e6;
background: pink;
}
#subHeaderLeft{
position:absolute;
left:0;
top:0;
width: 70px;
height:100px;
margin: 0;
border: 3px solid #6fb2e6;
background: white;
}
#subHeaderRight{
position:absolute;
right:0;
top:0;
width: 30px;
height:100px;
margin: 0;
border: 3px solid #6fb2e6;
background: yellow;
}
What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent.
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
So just add
position:relative
to your parent #subHeader.
This way the absolute positioning of the children work on its parent.
http://jsfiddle.net/qjfUk/9/
Just add position:relative; to #subHeader
Like
#subHeader{
position:relative;
width: 200px;
height:100px;
Helvetica, sans-serif;
margin: 10px auto;
border: 3px solid #6fb2e6;
background: pink;
}