I am working on a fluid grid (DreamWeaver CC) site. I have a header-Wrapper div containing stacked elements using z-index. I am now trying to add a div after the header-Wrapper but this div is floating behind the header-Wrapper. This is my first time working with z-index so I'm rather flummoxed.
I have tried position and display css elements for the mobileNav div and also tried to use a height element for the header-wrapper. Nothing. the mobileNav div seems to be ignoring the header-Wrapper altogether and acting like it is the first div in the gridContainer.
Thanks for your help
site: miki.nantucket.net/redac-2.php
html
<body>
<div class="gridContainer clearfix">
<div id="header-wrapper" class="fluid">
<div id="rotation" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
<div id="Weather" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
<div id="Navigation" class="fluid "><ul>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
<li>Nav6</li>
<li>This is not styled yet</li>
</ul></div>
</div><!--end header-wrapper-->
<div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
</div>
</body>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 92.625%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
background-color:#FBFAF6;
}
#header-wrapper {
position:relative;
width: 100%;
padding:0;
margin:0;
}
#rotation {
position:absolute;
z-index:1;
}
#Navigation {
display:none;
width: 100%;
}
#Weather {
text-align:right;
font-size:13px;
padding:5px 0px 10px 0px;
position:absolute;
z-index:50;
top:0px;
left:0;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
}
#mobileNav {
position:relative;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.4166%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 23.7288%;
}
#Weather {
}
#mobileNav {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.875%;
max-width: 1232px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 17.7215%;
}
#Weather {
}
#mobileNav {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
CSS for included responsive slider
/*responsive hero slider*/
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.caption {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
margin:0;
text-align: center;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
font-size:18px;
font-stretch:expanded;
}
Thank you. Due to the various elements, I do need the absolute positioning but your comment about allowing for the space in the header-wrapper gave me an idea. I put an image into the header-wrapper, fiddled around with the z-index property here and there. Probably not the most elegant way to do it but it's working!
Thank you.
html
<div class="gridContainer clearfix">
<div id="header-wrapper" class="fluid">
<div id="rotation" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
<div id="Weather" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
<div id="Navigation" class="fluid "><ul class="navBump">
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
<li>Nav6</li>
<li>This is not styled yet</li>
</ul></div>
<div id="LogoWrapper" class="fluid "><div id="Logo" class="fluid "><img src="images/sitewide/Logo.png"></div><div id="LogoTag" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/logtag.php" ?></div></div>
<img src="images/rotations/redac2/image1a.jpg">
</div><!--end header-wrapper-->
<div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
</div>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 92.625%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
background-color:#FBFAF6;
}
#header-wrapper {
position:relative;
width: 100%;
padding:0;
margin:0;
}
#header-wrapper img {
position:relative;
z-index:1;
}
#rotation {
position:absolute;
top:0;
left:0;
z-index:5;
margin-left: 0;
width: 100%;
}
#Navigation {
display:none;
width: 31.0344%;
margin-left: 0;
}
#Weather {
text-align:right;
font-size:13px;
padding:5px 0px 10px 0px;
position:absolute;
z-index:50;
top:0px;
left:0;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
margin-left: 0;
width: 100%;
}
#mobileNav {
z-index:0;
width: 100%;
margin-left: 0;
}
#LogoWrapper {
position:absolute;
top:0;
left:0;
z-index:1000;
}
#Logo {
}
#LogoTag {
font-size:12px;
color:#797979;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.4166%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
width: 100%;
margin-left: 0;
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 23.7288%;
margin-left: 0;
}
#Weather {
width: 100%;
margin-left: 0;
}
#mobileNav {
margin-left: 0;
width: 100%;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.875%;
max-width: 1232px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
width: 100%;
margin-left: 0;
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 24.0506%;
margin-left: 0;
}
#Weather {
width: 100%;
margin-left: 0;
}
#mobileNav {
width: 100%;
margin-left: 0;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
rotating images CSS
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.caption {
position: absolute;
z-index:25;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
margin:0;
text-align: center;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
font-size:18px;
font-stretch:expanded;
}
Your #mobileNav is appearing behind all of the #header-wrapper content because all of the #header-wrapper content is using position: absolute;. Absolutely positioned elements like #Weather and #Navigation are removed from the flow of the document as if they were never there. You probably just want to float them into their positions, but if absolute positioning is required, then you'll need to account for them with some space in the parent element.
Related
I'm new to CSS and have encountered a problem. I'm trying to display paragraphs on my website on desktop/global view as
#aeromexico
p {
float: left;
position: fixed;
text-align: left;
max-width: 25%;
padding: 0px 0px 0px 0px;
display:inline-block;
}
but when viewed in mobile and tablet I want them to be viewed as
#aeromexico .col-sm
p {
object-position: top;
text-align: left;
max-width:100%;
display:block;
padding-bottom: 60px;
}
However the second part of the code for mobile view is being ignored and is still displaying as desktop view on mobile. I have attached my whole code below
/Desktop / Global View/
body {
max-width: 1366px;
margin-left: auto;
margin-right: auto;
font-family: 'Open Sans', sans-serif;
padding: 1px;
}
#homepage .col {
float: left;
}
.col-lg {
width: 33.3%;
}
.col-lg img {
width: 100%;
height: auto;
display: block;
}
.slicknav_menu {
display:none;
}
#menu {
float: right;
}
#menu li {
display:inline-block;
}
#menu li a {
text-decoration:none;
color: #454545;
padding: 8px;
font-size: 18px;
}
header {
padding: 10px 0px 20px 0px;
}
ul {
padding-top: 40px;
}
.mylogo {
width: 95px;
}
/*aeromexico*/
#aeromexico .row {
padding:5px;
}
#aeromexico .col {
width: 70%;
margin-right: auto;
float: right;
display:inline-block;
padding-bottom: 40px;
}
#aeromexico .col-lg {
width: 65%;
}
#aeromexico
p {
float: left;
position: fixed;
text-align: left;
max-width: 25%;
padding: 0px 0px 0px 0px;
display:inline-block;
}
/*Tablet View*/
#media (max-width: 768px) {
#menu li {
display:block;
text-align: right;
}
header {
padding:10px;
}
.col-md {
width: 50%;
}
.mylogo {
width: 95px;
}
body {
padding:10px;
}
}
/*Mobile View*/
#media (max-width: 400px) {
.slicknav_menu {
display:block;
}
#menu {
display:none;
}
alt {
width: 95px;
}
.mylogo {
width: 95px;
}
.col-sm {
width:100%;
}
body {
padding:10px;
}
#aeromexico .col-sm {
width:100%;
}
#aeromexico .col-sm
p {
object-position: top;
text-align: left;
max-width:100%;
display:block;
padding-bottom: 60px;
}
}
Did you set up the metatag for the viewport on the HTML header?
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a 3 col slideshow and hide 2 col when the user views the site w mobile. This was working and I tried adding another col and then decided not to. Since then this is not working, and I can't seem to see why.
My code:
<div id="rightCol">
<div class="slideshowR">
<img src="../images/slideshow/kettle.jpg">
<img src="../images/slideshow/zucchini-flower.jpg">
<img src="../images/slideshow/truffle.jpg">
</div>
</div>
CSS:
.slideshowR {
height: 370px;
width: 250px;
margin: auto;
}
#leftCol {
width: 205px;
float: left;
margin: 0;
padding: 0;
display: none;
}
#centerCol {
width: 150px;
float: left;
margin: 0;
padding-left: 10px;
display: none;
}
#rightCol {
width: 250px;
float: left;
margin: 0;
padding-left: 10px;
}
#media only screen and (min-width: 769px) {
#leftCol {
display: block !important;
}
#centerCol {
display: block !important;
}
#rightCol {
}
}
I would just do this
#leftCol {
width: 205px;
float: left;
margin: 0;
padding: 0;
}
#centerCol {
width: 150px;
float: left;
margin: 0;
padding-left: 10px;
}
#rightCol {
width: 250px;
float: left;
margin: 0;
padding-left: 10px;
}
/* hide center and left in mobile */
#media only screen and (max-width: 769px) {
#leftCol, #centerCol {
display: none;
}
}
I have been searching the web for a while now for an answer to my question. I would like to extend a div background-color beyond the div (and the container div as well) so it reaches the width of the browser. Like so http://vinnusal.is/
The problem with the example above is I'm using a padding/margin fix which creates an annoying scroll to the right. I have tried overflow without any luck.
I know this could be done with a container div that is 100% and nesting divs that are smaller. However I would like to use another way if possible, because this is my first shot at a fluid site with all complications that follow.
Thanks in advance,
Helgi
Here is the HTML markup:
<body>
<div class="gridContainer clearfix"> <!-- Container -->
<div class="gridContainer clearfix header" id="header"> <!--Header begins-->
<img src="pics/hvitt.png" alt="VFI Logo" name="logo" id="logo">
<!-- Menu Horizontal -->
... irrelevant markup for menu...
</div>
<!-- Header ends -->
<div class="gridContainer clearfix submenu" id="submenu"> <!-- Submenu begins -->
<h1><!-- InstanceBeginEditable name="title" -->Articles<!-- InstanceEndEditable --></h1>
And the CSS:
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 88.626%;
padding-left: 1.1869%;
padding-right: 1.1869%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
#header2 {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
#header2 {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 78.9565%;
max-width: 1232px;
padding-left: 0.5217%;
padding-right: 0.5217%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 1.3215%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 1.3215%;
width: 100%;
display: block;
}
}
You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.
#container {
width: 100px;
margin: 0 auto;
background-color: #FFFFCC;
}
.stripe {
background-color:#CCFFFF;
height: 100px;
position: relative;
}
.stripe:before {
content:"";
background-color:#CCFFFF;
position: absolute;
height: 100%;
width: 4000px;
left: -2000px;
z-index: -1;
}
<div id="container">
<div>one</div>
<div class="stripe">two</div>
<div>three</div>
</div>
The accepted answer seems to rely on a fixed height, which I find rare in these days of responsive sites, so building on top of the answer given by Stephen Ostermiller (thanks!) The following code worked for me and surrounds objects of a dynamic height:
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
background-color:#000;
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}
Kevin Powell made a Youtube Video about how to do this
https://www.youtube.com/shorts/81pnuZFarRw
All you have to do is add a class to the element and add a couple of lines of CSS! You're basically making a color the whole background and then clipping it based on the element.
CSS
.full-bleed {
box-shadow: 0 0 0 100vmax red;
clip-path: inset(0 -100vmax);
}
HTML
<div class="full-bleed"></div>
Boom, you're done!
Both solutions will cause an overflow.
try this:
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
width: 100vw;
margin-left: -50%;
transform: translateX(-50%);
z-index: -1;
}
I have a div which is floating to the left with a menu in it and another div to the right which is filling the rest of the space, the problem is, the div on the right is set to 100% but is going off to the right of the page and creating an unwanted scroll. I think the cause is the left-margin I have put on it to allow for the left floating div. Is there a way to make the right div fill the rest of the space without creating a horizontal scroll but so that I can also align things left: 0px against the edge of the float.
I have put the page onto one of my other domains so you can see:
http://aspiresupportandhousing.com/cleanserve/
HTML:
<body>
<div id="lp_bt">
<div id="logo_container_s">
</div>
<div id="menu_container_s">
<nav id="secondary_nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Cleaning</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="left_panel">
<div id="logo_container">
</div>
<div id="menu_container">
<nav id="primary_nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Cleaning</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="right_panel">
<div id="main_container">
<div id="title">
</div>
</div>
</div>
</body>
CSS:
html {
height: 100%;
min-width: 1000px;
}
* {
margin: 0px;
padding: 0px;
}
body {
height: 100%;
min-width: 1000px;
color: #000000;
}
/* Hidden */
#lb_bt {
height: 30px;
width: 30px;
left: 30px;
}
#logo_container_s {
left: -150px;
width: 150px;
height: 42px;
position: absolute;
background: url(logo.jpg);
z-index: 3000;
}
#menu_container_s {
left: -150px;
height: 400px;
width: 150px;
position: absolute;
z-index: 3000;
}
/* End Hidden */
/* Left Panel */
#left_panel {
height: 100%;
width: 150px;
float: left;
background-color: #26609E;
z-index: 2000;
}
#logo_container {
width: 150px;
height: 42px;
left: 0px;
top: 0px;
position: relative;
background: url(logo.jpg);
z-index: 3000;
}
#menu_container {
height: 400px;
width: 150px;
top: 0px;
left: 0px;
position: relative;
}
ul {
list-style: none;
text-align: left;
border-top: solid 1px #002954;
}
ul li {
display: list-item;
}
ul li a:link, ul li a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
width: 800;
color: #FFFFFF;
line-height: 38px;
margin: 0px 10px;
padding: 0px 5px 8px 0px;
text-align: left;
text-decoration: none;
}
ul li a:hover, ul li a:active {
color: #2593C1;
}
#media only screen and (min-width: 280px) and (max-width: 800px) {
body {
background: none rgba(161, 220, 254, 0.4);
}
#left_panel {
left: -150px;
position: absolute;
}
#lp_bt {
top: 0px;
left: 0px;
background: url(menu.jpg);
width: 30px;
height: 30px;
}
#lp_bt:hover {
width: 150px;
height: 100%;
background: none #26609E;
}
#lp_bt:hover #secondary_nav {
display: list-item;
}
#lp_bt:hover #logo_container_s {
left: 0px;
top: 0px;
position: relative;
}
#lp_bt:hover #menu_container_s {
top: 0px;
left: 0px;
position: relative;
}
}
/* End Left Panel */
/* Right Panel */
#right_panel {
height: 100%;
width: 100%;
margin-left: 150px;
background: url(bg.jpg) no-repeat top left fixed;
background-size: cover;
position: absolute;
z-index: 1;
}
#main_container {
width: 700px;
height: 50%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
background: rgba(255, 255, 255, 0.8);
border-radius: 30px 30px 30px 30px;
}
#title {
width: 600px;
height: 104px;
margin-left: auto;
margin-right: auto;
top: 30px;
background: url(title.png) no-repeat center center;
position: relative;
}
#media only screen and (min-width: 280px) and (max-width: 800px) {
#right_panel {
background: none;
}
}
Your Scroll Is caused beacuse yo have a margin-left for your
#right_panel
You have three solutions wich envolve make some changes in CSS for the #right_panel
One use method calc() to set the width:
#right_panel {
width: calc( 100% - 150px);
}
Two change your z-index value and delete margin-left:
#right_panel {
width:100%;
margin-left:0;
z-index:-1;
}
Three use box-sizing and padding instead of margin:
#right_panel {
box-sizing:border-box;
padding-left:150px;
width:100%;
margin:0;
}
Seen as though #left_panel and #right_panel are positioned absolutely, you can simply remove the negative margin form #left_panel:
#left_panel {
left: 0px;
position: absolute;
}
... then remove the 100% width from #right_panel and position it thusly:
#right_panel {
top:0; right:0; bottom:0; left:150px;
}
http://jsfiddle.net/Pz7PP/
You need use CSS position.
A little example
Codepen
CSS
*{margin:0;padding:0;}
#divleft {
position:absolute;
top:0;bottom:0;left:0;
width:250px;
background: red;
}
#divright {
position:absolute;
top:0;
bottom:0;
left:250px;
right:0;
background: green;
}
As shown on this page
I have tried all I can to make the overflown part of the logo to display on-top of the slideshow but it wouldn't work. The CSS is as shown below.
#logo {
float: left;
position: absolute;
margin-top: -58px;
width: 250px;
margin-left: -52px;
}
.clear {
clear:both
}
#gallery {
width: 100%;
float: left;
margin-bottom: -28px;
position: absolute;
height: 509px;
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
width: 100%;
float: left;
position: absolute;
margin-bottom: -28px;
}
#gallery a.show {
z-index:500;
width: 100%;
position: absolute;
margin-bottom: -28px;
height: 509px;
float: left;
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
Just add z-index for your logo id then it should work. Half of your logo is sitting behind the slider.
#logo {
float: left;
position: absolute;
margin-top: -58px;
width: 250px;
margin-left: -52px;
z-index:599;
}