I don't even know if this is possible. If you check out the image below, you'll see a purple box and a white box. The white box has a photo of my dog Zuko. I'm trying to keep the right edge of that photo perfectly aligned with the right edge of the purple box behind it. But of course, when you start changing the screen size slightly it is no longer aligned. Is there any way to fix those two divs together so when the screen is adjusted, they adjust together and stay aligned?
I tried fixing them both to absolute, using percentages, but I don't even know if what I'm aiming for is possible.
box1 is the purple box, box2 the white containing the photo.
<html>
<head>
<meta charset="utf-8">
<title>ZUKO</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<img id="zuko-title" src="zuko-title.svg" alt="Zuko">
<div id="box1" class="floater"></div>
<div id="box2" class="floater">
<div class="intro-text">
<h3>hi, i'm Zuko the dog.</h3>
</div>
<img id="zuko-bolts" src="zuko-bolts.svg" alt="">
</div>
<div id="box3" class="floater">
<ul>
<li>about</li>
<li>frolicking</li>
<li>my 'rents</li>
<li>stuff</li>
</ul>
</div>
</body>
</html>
.floater {
position: absolute;
}
#box1 {
background-color: #DB7ACC;
width: 74%;
height: 100%;
top: 17%;
left: 15%;
z-index: 1;
}
#box2 {
background-color: #fff;
width: 84%;
height: 100%;
top: 25%;
left: 11%;
z-index: 3;
}
#zuko-bolts {
height: 50%;
float: right;
margin-right: 7.2%;
position: absolute;
}
Place #box2 within box#1.
Since they are both positioned and the child (i.e. #box2) is absolute, we would be able to position #box2 within the confines of #box1.
If we want the right edge of #box2 to be flush with the right edge of #box1, set #box2 right:0; this will work for any edge so top:0; would set the top edge of #box2 to the top edge of #box1, and so on.
If we review the Snippet in Full page mode we'll see that no matter how the viewport (width of screen) changes, #box2 will not only conform in size relative to #box1, it will consistently stay in the same position relative to #box1's borders.
SNIPPET
.floater {
position: absolute;
}
#box1 {
background-color: #DB7ACC;
width: 74%;
height: 100%;
top: 17%;
left: 25%;
z-index: 1;
}
#box2 {
background-color: #fff;
width: 84%;
height: 100%;
top: 25%;
right: 0;
z-index: 3;
background: url(http://news.vet.tufts.edu/wp-content/uploads/national-pet-dental-health-month.jpg)no-repeat;
background-size: contain;
border: 1px dashed #db7acc;
}
#zuko-bolts {
height: 50%;
float: right;
margin-right: 7.2%;
position: absolute;
}
<html>
<head>
<meta charset="utf-8">
<title>ZUKO</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<img id="zuko-title" src="zuko-title.svg" alt="Zuko">
<div id="box1" class="floater">
<div id="box2" class="floater"></div>
</div>
<div class="intro-text">
<h3>hi, i'm Zuko the dog.</h3>
</div>
<img id="zuko-bolts" src="zuko-bolts.svg" alt="">
</div>
<div id="box3" class="floater">
<ul>
<li>about
</li>
<li>frolicking
</li>
<li>my 'rents
</li>
<li>stuff
</li>
</ul>
</div>
</body>
</html>
I had a different method than Ed, and it could be that it isn't exactly what you need but if you can explain your what you need I'd be more than happy to help you.
I was having a hard time with your HTML, so I changed it a little bit. Hopefully you can figure out on your own which parts you need to change or add.
I tried to comment the code as completely as I could in case you were having trouble understanding.
body,
html {
height: 100%;
margin: 0;
box-sizing: border-box;
background-color: lightgreen;
/*Makes the height and margin for both the HTML and Body elements 100% of the available height, also removes margins.*/
}
.wrapper.zuko {
/*The wrapper for the stuff so that we don't polute our regular HTML with styles and colors we don't need.*/
position: relative;
/* Makes absolute positioning work as expected for child elements*/
background-color: white;
height: 100%;
/*Make it 100% as tall as its parent*/
width: 80%;
/* but only 80% as wide*/
margin: 50px auto;
/* 50px margin on the top and bottom, automatic padding on the left and right*/
padding-top: 10px;
}
.wrapper.zuko .zuko-title {
position: absolute;
/*Changes how this is positioned with respect to its parent.*/
height: 25px;
/*makes the element 25 pixels high*/
line-height: 50px;
/*Probably not needed, but it was ther*/
font-size: 45px;
/*How big is the title text? Hella.*/
padding-left: 5px;
/* Little bit of padding on the left to ensure it's not right on the border */
top: -25px;
/* positioned 25 pixels above the top border of it's parent */
left: 5%;
/* left by 5%*/
right: 10%;
/* right by 10% */
background-color: #cd00cd;
/*random purple color */
}
.wrapper.zuko .zuko-title .zuko-title-img {
position: absolute;
/*again, changes how this thing is positioned by its parent*/
right: 0;
/* directly on the right edge */
top: 100%;
/* 100% of the elements height from the top edge of the element */
}
.wrapper.zuko .zuko-title .zuko-title-text {
position: absolute;
top: -20px;
/*Twitches the text above the purple border like in image.*/
}
<div class="wrapper zuko">
<div class="zuko-title">
<div class="zuko-title-text">
Zuko
</div>
<img src="http://placehold.it/300x200?text=Zuko" alt="" class="zuko-title-img" />
</div>
<div>Hello
</div>
</div>
There's a lot going on in this question... Here's how I might approach the layout you've asked for. Let me know if you have specific questions.
CODEPEN
For the purple box...
Wrap the image in a container and then use a pseudoelement to create the border.
Example
.image-container {
height: 150%;
margin-right: 10%;
width: 90%;
text-align: right;
position: relative;
}
.image-container::before {
content: '';
display: block;
position: absolute;
top: -50px;
width: 90%;
right: 0;
border-top: 50px solid purple;
}
Full snippet
body {
width: 1200px;
margin: 150px auto 0;
background: lightgreen;
position: relative;
}
.intro-text {
position: relative;
}
.intro-text h3 {
position: absolute;
font-size: 120px;
letter-spacing: 4px;
top: -240px;
left: 120px;
z-index: 5;
font-weight: bold;
font-family: sans-serif;
}
#box2 {
background-color: #fff;
width: 84%;
z-index: 3;
padding-bottom: 150px;
position: relative;
}
#box2::after {
content: " ";
display: block;
height: 0;
clear: both;
}
.image-container {
height: 150%;
margin-right: 10%;
width: 90%;
text-align: right;
position: relative;
}
.image-container::before {
content: '';
display: block;
position: absolute;
top: -50px;
width: 90%;
right: 0;
border-top: 50px solid purple;
}
#zuko-bolts {
width: 40%;
}
#box3 {
/* this menu is strangely coded */
position: absolute;
top: 50px;
left: -150px;
z-index: -1;
}
<img id="zuko-title" src="https://placehold.it/50x50" alt="Zuko">
<div id="box1" class="floater"></div>
<div id="box2" class="floater">
<div class="intro-text">
<h3>ZUKO</h3>
</div>
<div class="image-container">
<img id="zuko-bolts" src="https://placehold.it/50x50" alt="">
</div>
</div>
<div id="box3" class="floater">
<ul>
<li>about
</li>
<li>frolicking
</li>
<li>my 'rents
</li>
<li>stuff
</li>
</ul>
</div>
#zuko-bolts {
position: absolute;
height: 50%;
right: 7.14%;
top: 0;
}
Purple box's right side is 6% more to the right of the white box's right side. Since the image is located inside the white box, you need to find the equal of that 6% screen size distance in a 84% box. So basically, 6x100/84=7.14 approximately.
(Posted on behalf of the OP).
Thanks so much everyone for helping. All I had to do was change height: 50% to width and that made it align like it was supposed to.
Related
In summary, I made a container div (parent) with a position: relative, then added 3 children divs with position: absolute. I am now trying to add another div that is below all of this, i.e. the next section of a website. But now the next div appears under the first main "parent" div. From endless searching on here and google I though a main div with position relative would not destroy the flow, but obviously it did or else I would't be posting.
I now want to have another div outside of the parent so that it will go under this first div and make for a nice, scolling website. Please look at my CSS and help me understand why the absolute elements inside a relative element messed up the flow. (I'm new to CSS, so any pro tips are appreciated!)
Here is an image of the website so you get a feel
*{
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'Noto Sans HK', sans-serif;
}
/* Arranging the parent and child elements so
images can overlap */
.child {
top: 0;
}
.child-1 {
position: absolute;
left: 0;
z-index: 100;
}
.child-2 {
position: absolute;
right: 0;
z-index: 1;
}
.child-3 {
position: absolute;
padding-top: 38%;
left: 0;
}
#parent {
position: relative;
height: auto;
}
.hero-text {
position: absolute;
text-align: center;
right: 10vw;
top: 28vw;
z-index: 9;
font-size: 3.5vw;
float: right;
color: white;
}
/* Responsive viewport area,
Logo resize based on the screen size */
#logo_png {
max-width: 25vw;
}
#hero_img {
max-width: 85vw;
}
#green_circle_png {
max-width: 40vw;
}
/* NAV BAR STYLING */
#container {
position: absolute;
z-index: 900;
width: 95%;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 5vw; /* margin-left obly touches the left margin, not L & R */
padding-top: 25px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 1.4vw;
}
nav a:hover {
color: black;
}
.p1 {
color: #f5f7ff;
font-size: 10vw;
}
#test {
position: relative;
}
<body>
<div id="parent">
<div class="child child-1">
<h1>
<a href='THIS WILL BE LINK TO HOME PAGE'>
<img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists"/>
</a>
</h1>
</div>
<div class="child child-2">
<h1>
<img id="hero_img" src="Images/circle_hands_lbsphoto.png" alt="Little Big Scientists"/>
</h1>
</div>
<div class="child child-3">
<h1>
<img id="green_circle_png" src="Images/green_circle_lbswebsite.png" alt="Little Big Scientists"/>
</h1>
</div>
<div class="hero-text">
<p>We’re on a mission to teach,
<br>guide, and empower the next
<br> generation of scientists
</p>
</div>
<!-- Div for Nav Bar-->
<div id="container">
<nav>
<ul>
<li>Mission</li>
<li>About</li>
<li>Events</li>
<li>Donate</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div id="test">
<h2 class="p1">Inspiring Education</h2>
</div>
<h2 class="p1">HELP MEEEE</h2>
</body>
I don't think there's necessarily anything wrong with using absolute positioning for some elements. The main problem you are experiencing is that because everything inside #parent is absolute positioning #parent collapses and has zero height. If you want to do overlapping circles, absolute positioning is a valid way to do it, but you have to expressly set a height for #parent.
Below is a modified copy of your code. I want to emphasize it is a very rough starting point, and by no means is it complete, but I think it demonstrates some of the things you can do. Even with absolute positioning of the circle elements it is still fairly responsive and it could be made fully responsive by adding appropriate media queries to the css.
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans HK', sans-serif;
}
/* Arranging the parent and child elements so
images can overlap */
.child {
position: absolute;
}
.child-1 {
top: -75px;
left: -75px;
z-index: 100;
width: 300px;
height: 300px;
max-width: 50vw;
max-height: 50vw;
background: blue;
border-radius: 50%;
}
.child-1 h1 {
position: absolute;
right: 10%;
bottom: 20%;
background: white;
}
.child-2 {
right: -40vw;
top: -50vw;
z-index: 1;
width: 120vw;
height: 120vw;
background: center / contain no-repeat url("./Images/circle_hands_lbsphoto.png"), content-box linear-gradient(lightgray, lightgray);
border-radius: 50%;
}
.child-3 {
top: 60vh;
left: -5vw;
width: 550px;
height: 550px;
max-width: 50vw;
max-height: 50vw;
border-radius: 50%;
background: lightgreen;
}
#parent {
position: relative;
min-height: 100vh;
height: 550px;
width: 100vw;
overflow: hidden;
}
.hero-text {
position: absolute;
text-align: center;
left: 40%;
transform: translateX(-50%);
top: 60%;
z-index: 9;
font-size: 3.5vw;
color: white;
}
/* Responsive viewport area,
Logo resize based on the screen size */
#logo_png {
max-width: 25vw;
}
#hero_img {
max-width: 85vw;
}
#green_circle_png {
max-width: 40vw;
position: absolute;
bottom: 20%;
left: 20%;
}
/* NAV BAR STYLING */
#container {
z-index: 900;
width: 100%;
margin: 0 auto;
position: sticky;
top: 0;
background: #fff;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 5vw; /* margin-left obly touches the left margin, not L & R */
padding-top: 25px;
position: relative;
}
nav a {
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 1.4vw;
}
nav a:hover {
color: black;
}
.p1 {
color: #f5f7ff;
font-size: 10vw;
}
#test {
position: relative;
}
<body>
<div id="parent">
<div class="child child-1">
<h1>
<a href='THIS WILL BE LINK TO HOME PAGE'>
<img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists 1"/>
</a>
</h1>
</div>
<div class="child child-2">
<img id="hero_img" alt="Little Big Scientists 2"/>
<div class="hero-text">
<p>We’re on a mission to teach,
<br>guide, and empower the next
<br> generation of scientists
</p>
</div>
</div>
<div class="child child-3">
<h1>
<img id="green_circle_png" src="Images/green_circle_lbswebsite.png" alt="Little Big Scientists 3"/>
</h1>
</div>
</div>
<!-- Div for Nav Bar-->
<div id="container">
<nav>
<ul>
<li>Mission</li>
<li>About</li>
<li>Events</li>
<li>Donate</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="test">
<h2 class="p1">Inspiring Education</h2>
</div>
<h2 class="p1">HELP MEEEE</h2>
</body>
I am new to CSS and HTML, and I am working on my final project for school.
I am trying to absolutely position some text "Welcome" to a div I've made. For some reason it won't position in relation to the div, I've looked it over 10 times and can't figure out why.
I want the "Welcome" text to sit at the bottom of the welcome div, however when I put bottom:0px; into the CSS, it doesn't position according to its parent container and instead goes 0px from the top of the whole screen.
Here's the code:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
You are very close. Take the height away from the .w p tag and remove its margin as well:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
/*height: 150px;*/
margin: 0;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
The problem, as CalvinNunes pointed out, is that you have a height set on .w div. And, p elements have margin and line-height values by default. You need to remove the margin and set the line-height to 1 or less (.5 makes the text touch the bottom of the green box).
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
position: relative;
}
#header {
height: 150px;
background-color: red;
position: absolute;
width: 100%;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav">
</nav>
</header>
</div>
<!-- End of wrapper-->
If you use absolute on something, related dom element should be relative, absolute or fixed, depending on your needs.
Also check if your absolute element doesn't have some unneeded margins etc.
But in your usage case i don't think that there is absolute needed. you can use bigger paddings for parent element top. Also this can be achieved using flex-end, which will allow dynamic text input.
The yellow box at the top works like it should. The one at the bottom does not. The scrolling should stop at the end of the footer, here as black line (and also not extend to the right).
Of course, there could be a way to to this with graphics.
Is there a solution with CSS?
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
...
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
View on JSFiddle
Please check this code. hope it will help you
#mainwrapper {
max-width: 100%;
margin: auto;
padding-top: 100px;
position: relative;
overflow-y: hidden;
}
#mainwrapper:before,
#mainwrapper:after{
content : "";
transform: rotate(-3.5deg);
position: absolute;
top: -60px;
left: 0;
height: 100px;
right: 0;
width: 100%;
background-color: yellow;
transform: rotate(-3.5deg);
}
#mainwrapper:after{
top: auto;
bottom: -60px;
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
html,body,#mainwrapper{
height:100%;
}
body{
margin-bottom:0;
}
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
overflow:hidden;
box-sizing:border-box;
}
main{
height: calc( 100% - 19px );
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
Check in Fiddle https://jsfiddle.net/h25d5b8z/28/
First up all you must need to set height 100% to html,body and the main element.If we absolute any item ,we must need to add property overflow:hidden to it's parent element.In this case we need to add overflow:hidden to #main-wrapper.We also need to set height to main tag element
After reading several topics about css overflow problems here on stackoverflow, I found the solution by myself. It is difficult to use overflow on only one axis because of unexpected behaviour.
Insted the #mainwrapper div needs to be wrapped in another div. This div comes with overflow: hidden.
<div style="overflow:hidden;">
<div id="mainwrapper">
...
</div>
</div>
I'm working on a project where I need to float the previous and next navigation elements to either side of a blog archive page title (green circles for this example). Sitting inside the green circle will be a span with an SVG background element - so the circle needs to be positioned.
I wanted to keep things semantic, so I've laid out my page (section) header as follows:
<header class="archive-box">
<nav class="archive-nav">
<div class="left-nav">
<a class="icon-bg" href="#" title="">
</a>
</div>
<div class="right-nav">
<a class="icon-bg" href="#" title="">
</a>
</div>
</nav>
<h2>Stuff and Things</h2>
</header>
CSS
.archive-box {
max-width: 900px;
height: 75px;
margin: 50px auto;
border: 1px solid;
position: relative;
}
.archive-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.left-nav {
position: absolute;
left: 0;
}
.right-nav {
position: absolute;
right: 0;
}
.icon-bg {
background-color: #9ccb3b;
border-radius: 50%;
height: 75px;
width: 75px;
position: absolute;
}
h2 {
text-align: center;
}
The right navigation element is going outside of its parent's container. I think it might have something to do with the fact that I've got multiple parent-child absolute elements. Is there another way to do this?
Here's the CodePen
Sometimes you need to have specific order of coding css positions. What i mean is if you paste the whole code and run it, it will be different if you wrote it step by step and saved it. It helped me couple of times when i was learning css.
Also try to put margin:auto in .right-nav and .left-nav
Is this how you want it to be? CodePen. Instead of using position: absolute, I've used float: left and float: right so that the left and the right menu items are positioned on the left and the right side respectively and the title is in the center.
section {
position: relative;
background-color: blue;
color: white;
width: 80%;
margin: auto;
}
article {
background-color: green;
height: 50px;
}
h1 {
color: white;
font-size: 30px;
}
nav {
top: 0;
font-size: 20px;
}
.left {
left: 0;
/* position: absolute; */
color: yellow;
}
.right {
right: 0;
/* position: absolute; */
color: pink;
}
h1 {
text-align: center;
}
.bg {
float: left
}
.bgtwo {
float: right;
}
<section>
<nav>
<div class="bg">
<div class="left">LEFT</div>
</div>
<div class="bgtwo">
<div class="right">RIGHT</div>
</div>
</nav>
<h1>Hello There</h1>
<article>
<p>Here is some stuff about things.</p>
</article>
</section>
I am a CSS beginner.
I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.
Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves.
I want the table of contents to stay at a fixed distance to the main div.
jsFiddle link
With this window size everything looks ok:
Decreasing the window size moves toc under content div:
html
<html>
<head>
<title>Testpage</title>
<link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
<div id="contenttable">
<h1>Contents</h1>
Content 01<br>
</div>
<div id="content">
some text
</div>
</body>
</html>
css:
#content{
height: 1000px;
width: 320px;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
#contenttable{
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
left: 6%;
}
#contenttable a{
position: relative;
top: 0px;
left: 66%;
}
#contenttable h1{
position: relative;
top: 0px;
left: 66%;
}
You can use an inner div absolutely positioned inside the fixed TOC, and set its position.
Use CSS3 Calc to elaborate the right position for your main content.
Use opacity for transparency, and avoid setting the height of the main content div for automatic overflow handing.
Demo: http://jsfiddle.net/vMAQz/1/
CSS
#contenttable {
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
}
#innerContent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
padding: 30px;
}
#content {
padding: 10px;
opacity: 0.8;
width: 320px;
position: relative;
top: 50px;
left: calc(100% - 480px);
background-color: cyan;
}
HTML
<div id="contenttable">
<div id="innerContent">
<h1>Contents</h1>
Content 01
<br/>
</div>
</div>
<div id="content">
some text
</div>
all you need to do is change the width of the content div
#content{
height: 1000px;
width: 30%;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}