We Keep Coding

Transparent/Opaque Navigation Bar is Behind "div" with Class "transbox"

I started off with some text over a background image for the home page on my website. I wanted to make the letters more legible so I added an opaque box using the class "transbox" and setting it's opacity. I'm not too concerned about the text being transparent, but now the navigation bar that I have set up sits behind the "transbox" and will not let me click the links when I scroll over the "transbox" since it is sitting over the navigation bar.
I have already tried setting the z-index appropriately and even went through changing the classes and css code to make it simply a transparent container with some text, however the problem persists and new issues arise regarding container/text placement.
All I want is the navbar to be over everything so it is not covered and unusable in any situation as the user scrolls through the page. I'm curious if this is a bug with opacity, if I am using the wrong type of class, or if it is something entirely different.
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
$('header').addClass('black');
$('header .logo img').addClass('black');
$('header ul').addClass('black');
$('header a').addClass('black');
}
else
{
$('nav').removeClass('black');
$('header').removeClass('black');
$('header .logo img').removeClass('black');
$('header ul').removeClass('black');
$('header a').removeClass('black');
}
})
header{
background: #35424a;
color: #ffffff;
z-index: 999;
}
header.black{
z-index: 999;
}
header a{
color: #5ff5a3;
text-decoration: none;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-transform: uppercase;
padding: 5px 20px;
font-size: 16px;
transition: .5s;
}
header a.black{
color: #ffffff;
font-size: 14px;
}
header ul{
float: right;
padding: 68px 50px 0 10px;
display: flex;
transition: .5s;
}
header ul.black{
padding: 40px 10px 0 10px;
}
header li{
float: left;
display: inline-block;
box-sizing: border-box;
padding: 1px;
transition: .5s;
}
header nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: .5s;
}
header nav.black{
background: rgba(0,0,0,.8);
color: #000000;
}
header .current a, header a:hover{
color: #ffffff;
background: #000000;
font-weight: bold;
border: 1px solid #ffffff;
transition: .5s;
}
header .logo img
{
width: 500px;
padding: 0px 50px;
height: auto;
float: left;
transition: .5s;
}
header .logo img.black
{
width: 300px;
padding: 0px 20px;
}
#showcase{
min-height: 1000px;
background: url(../img/showcaseimg.jpg) no-repeat 0 -200px;
background-size: cover;
background-position: center;
text-align: center;
color: #ffffff;
}
#showcase h1{
font-size: 55px;
color: #ffffff;
padding: 0px 20px;
}
#showcase p{
font-size: 20px;
color: #ffffff;
padding: 0px 20px 20px;
}
#showcase .transbox{
margin-top: 700px;
margin-bottom: 10px;
background-color: #000000;
opacity: 0.6;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="./img/creativecs_logo.png">
</div>
<ul>
<li class="current">HOME</li>
<li>SERVICES</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="transbox">
<h1>Custom PC solutions for anyone and everyone.</h1>
<p>Designed by engineers. Tested by enthusiasts. Check out what CreativeCS has to offer you.</p>
</div>
</div>
</section>

It work fine for me.
That being said, for z-index to work you need your elements with z-index to be positionned (MDN).
header {
position:relative;
z-index: 999;}
#showcase {
position:relative;
z-index: 1;
}
You might need to read about the stacking context.
Here header and #showcase exist in the stacking context of the root element (html) so it will work fine. Other times you might want to create a stacking context that is not as high as the root element.

Everything seams to be fine, anchors do fire as expected, you can add this script to see wich element is selected..
var x = document.getElementsByTagName("*")
for(var i = 0; i< x.length; i++){
x[i].addEventListener("click", function(e){
alert(e.target.tagName)
})
}

when i re-size my browser all element change their place

when i re-size my browser all element change their place can any one help me ??? but some of element like logo & navigation when i re-size the browser Not affected
i tried to make the position fixed absolute or static but nothing change
<head>
<title>www.adamkides.com/main</title>
<link rel="icon" href="logo.jpg" type="image/x-icon">
<link href='http://fonts.googleapis.com/css? family=Archivo+Narrow:700italic,700,400' rel='stylesheet' type='text/css'>
<style type="text/css">
a{color:black;}
body {
font-family: 'Lucida Grande', helvetica, arial, sans-serif;
font-size: 12px;
background: white;
background-size:101%;
height:100%;
background-image: url('dr5.jpg');
background-repeat:no-repeat;
margin:-70 0 0 0;
}
#face:hover {
background: #333;
border-left: 5px solid #000;
}
#face{ MARGIN-LEFT: -850PX;
MARGIN-TOP: 1PX;}
#container
{
margin: 0 auto;
width: 100%;
background: #fff;
}
#header
{
background-image: url(hand.jpg);
background-size: 310px;
background-repeat: no-repeat;
padding: 20px;
background-color:white;
width: 320px;
height: 100px;
float:right;
margin: 70px 500px -11px 0%;
}
#header h1 { margin: 0; }
.navigation {
margin: 5px 20px 30px 20%;
background: #fff;
overflow: hidden;
width: 760px;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}
.navigation li {
width: 120px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px 50px 10px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.navigation li h2 {
font-family: georgia;
font-weight: bold;
font-style:arial;
font-size: 20px;
margin-bottom: 5px;
line-height: 16px;
}
.navigation li p{
font-size: 11px;
color: #999;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
.navigation li:hover {
background: greenyellow;
border-left: 5px solid #000;
}
.navigation li:hover h2 {
font-weight: bold;
color: yellow;
}
.navigation li:hover p {
color: orange;
padding-left: 5px;
}
#content-container
{ float: left;
width: 55%;
margin-top: -25px;
margin-left: 320px;
height: 60%;
background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;
}
.ti{
border-color: greenyellow;
border-style: dotted;
margin-top: -70px;
border-width: thin;
width: 235px;
height: 250px;
margin-left: 295px;
font-size: 24px;
color: orange;
font-weight: 700;}
#content {
clear: right;
float: left;
width: 60%;
padding: 5px 0;
margin: -14px -41px -294px 7%;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 26%;
padding: 20px 0;
margin: 15 320 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer{margin: 30px 20px -2px 0px;
overflow: hidden;
border-color: greenyellow;
border-style: dotted;
border-width: thin;
width: 760px;
height:100px;
background-color:white;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);}
</style>
</head>
<body>
<div id="container">
<img src="logo1.jpg" width="50px" height="50px" style="margin-top: 75px;margin-left: 522px;/* border:solid; *//* border-color:#ef5d9b; */height: 100px;float: left;width: 100px;"> <div id="header" style="background-image: url(hand.jpg);">
</div>
<ul class="navigation">
<a href="mainpage.html"><li>
<h2>الصفحة الرئسية</h2>
<p>main page</p>
</li></a>
<a href="f.html"><li>
<h2>فلسفتنا</h2>
<p>our</p>
</li></a>
<a href="how.html"><li>
<h2>من نحن</h2>
<p>Who we are</p>
</li></a>
<a href="gallary.html"><li>
<h2>الاستديو</h2>
<p>gallary</p>
</li></a>
<image id="face" src="face.jpg" width="80px" height="80px"/>
</ul>
<div id="content-container">
<div id="content">
<h2 style="float:right;font-size:50px;color:green;"><img src="well.jpg" width="70px" height="70px"style="margin-top:10px;"> كلمة ترحيبية </h2>
<p align="right"style="float:right;font-size:25px ;margin-left:-10px;color:black;">
مرحباً بكم في صفحتنا التي عملنا بجهد متواضع لنجعل منها موقعاً متميزاً يخدم الجميع ، ليس فقط أهالي أطفال الروضة بل و أيضاً الزبائن الكرام ، و نتمنى أن تكون مرجعاً مفيداً لكم، و أن تكون حلقة وصل بيننا و بينكم ، . . . فلا تترددوا بتزويدنا بكل مقترحاتكم و آرائكم التي تساعدنا على التطور نحو الأفضل واعلموا أن رأيكم مهم لدينا وسيساعدنا على لتطور .
نأمل أن تجدوا المعلومات التي تبحثون عن
ها على موقعنا الالكتروني
، ولمزيد من المعلومات أو الاستفسارات الرجاء طلب ذلك،
وسوف يسعد نا توفيرها لكم نتطلع إلى الترحيب بكم في
روضتنا ونأمل أن يعودو أطفالكم بذكريات جميلة و تجربة
فريدة.
</p>
</div>
<div id="aside">
<h3>
<div class="ti" >
<p id="time"style="margin-left:20%;margin-top:70px;"></p>
<script>
var x=setInterval(function(){myTimer()},1000);
function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString();
}</script>
<p id="date"style="margin-left:15%"></p>
<p style="margin-left:30%">اتسلى معنى</p>
<script>
var d = new Date();
document.getElementById("date").innerHTML = d.toDateString();
</script><br><br>
</script>
</div>
</div>
<div id="footer"><h2 style="margin-top:7px;float:right;margin-right:30px;color:green;font-size:30px;">:اتصل بنا</h2></div>
<h4 style="font-size:18px;float:right;margin-top:-60px;margin-right:50px;">065925575 - 0796877760<br> 065925575 فاكس </h4>
<h2 style="margin-top:-94px;float:left;margin-left:30px;color:green;font-size:30px;">:البريد الالكتروني</h2>
<h4><a style="margin-left:30px;margin-top:-40px;clear:left;color:black;float:left;font-size:18px;" href="mailto:info#adam-kids.com">info#adam-kids.com</a></h4 >
<h2 style="float:right;margin-top:-100px;margin-right:150px;color:green;font-size:30px;">:العنوان</h2>
<h4 style="margin-bottom: auto;margin-top:-67px;margin-right:80px;font-size:18px;width:190px;float:right;">
بناية رقم 9 - شارع علي سيدو الكردي
- خلف كنيسة اللاتين - عبدون الشمالي
- عمان - الأردن
</h4>
</div>
</body>
</html>

You need to make your CSS responsive. By responsive, I mean that your CSS should be able to react to the different browser widths and heights.
This is a massive topic but a good place to start might be here:
http://www.w3schools.com/css/css_responsive_intro.asp
You should also look into CSS frameworks such as Bootstrap or Foundation:
http://getbootstrap.com/
http://foundation.zurb.com/
Both of which have plenty of online tutorials you can learn from. The w3schools link I have provided gives you a basic introduction to Bootstrap.

That's happening because you're mixing fixed units and relative units in your CSS.
Fixed units like pixels keeps the especified sizes even when you resize your browser, while relative units like percentages reacts and adapts to resizing.
Consider that fixed units will create a lot of horizontal scroll depending on the device your site it's being viewed from, but relative units will reorganize your page for a better presentation, that's what we call "Responsive".

Use the browser development tool to see the properties of elements and inspect why they are behaving that way. For your example, the ul with the 'navigation' class has margin-left set to 20%, which makes it change position when the total width of the page changes.
I have to agree with the others, though, and ask you to read more about the subject so you can understand the samples you are working with.

Vertical Tabs using JQuery

I am trying to implement vertical tabs using JQuery. I have been able to create vertical tabs as I require but the content which I want to show for each tab is all getting displayed in one tab only. Here is the fiddle I have created -
https://jsfiddle.net/z5uq0ppd/
The code is as such -
$(function() {
$("#Configuration").tabs();
});
.side-tabs {
float: left;
width: 20%;
height: 100%;
border: 1px solid black;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.side-tabs:after {
display: block;
clear: both;
content: '';
background-color: #333;
}
.side-tabs li {
float: left;
}
.side-tabs a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.side-tabs a:hover {
background-color: #4CAF50;
}
<div id="Configuration" style="width:100%;height:100%">
<div class="side-tabs">
<ul>
<li class="active" id="09">Home</li>
<li id="10">Add Channel</li>
<li id="11">Add Device</li>
<li id="12">Add Device Type</li>
<li id="13">Display Device Tree</li>
</ul>
</div>
<div style="float:right;width:78%;height:100%; border:1px solid black;">
<div id="ConfigurationPage" style="padding:10px; width:100%; height:100%;">Welcome to Configurations.</div>
<div id="addDevicePage" style="padding:10px; width:100%; height:100%;">Add Device Page.</div>
<div id="addChannelPage" style="padding:10px; width:100%; height:100%;">Add Channel Page.</div>
<div id="addDeviceTypePage" style="padding:10px; width:100%; height:100%;">Add Device Type page.</div>
<div id="DisplayDeviceTreePage" style="padding:10px; width:100%; height:100%;">Device Tree</div>
</div>
</div>
I have implemented horizontal tabs successfully and was doing verticals the same way. However, it doesn't seem to work.

CSS / Javascript - Mobile responsive menu for smaller screens

I'm helping out a friend setup a responsive menu for his website, and from some initial research we failed to find ways we could achieve this with CSS3, and it seems like it's only achievable through javascript / jquery. Having never worked with such languages I was hoping you could help us achieve this:
We'd like to make the sub-menus expand by clicking their parent li whenever the screen resolution is 1200px or less.
Below is the HTML and CSS for the menu in question which currently expands on mouse hover.
HTML
<nav id="main_navbar_container" class="navbar navbar-default ">
<div class="container">
<div class="row">
<!-- Brand and expand button get grouped for better mobile display -->
<div id="main_logo_container" class="navbar-header">
<!--Main logo container-->
<div="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a id="brand_name_header" class="navbar-brand" href='http://localhost/wordpress/' title='test' rel='home'>
<div>
<img src='http://localhost/wordpress/wp-content/uploads/2015/10/2015.10.13-jbits.png'width="100px">
</div><!-- site-logo -->
</a>
</div>
<!--main logo container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="menu_container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav id="primary_menu" class="nav navbar-nav">
<div class="menu-home-screen-menu-container">
<ul id="menu-home-screen-menu" class="menu">
<li id="menu-item-447" class="menu-item-447">Home
</li>
<li id="menu-item-428" class="menu-item-428">About us
</li>
<li id="menu-item-429" class="menu-item-429">Recommendations
</li>
<li id="menu-item-427" class="menu-item-427">Gallery
</li>
<li id="menu-item-13" class="menu-item-13"><a>Services</a>
<ul class="sub-menu">
<li id="menu-item-421" class="menu-item-421">Evacuation Plans
</li>
<li id="menu-item-425" class="menu-item-425">Risk Assessment
</li>
<li id="menu-item-417" class="menu-item-417">Fire safety advice
</li>
<li id="menu-item-424" class="menu-item-424">Risk Management
</li>
<li id="menu-item-423" class="menu-item-423">Fire Training
</li>
<li id="menu-item-422" class="menu-item-422">Fire Drills
</li>
</ul>
</li>
<li id="menu-item-16" class="menu-item-16"><a>Products</a>
<ul class="sub-menu">
<li id="menu-item-430" class="menu-item-430">Fire blankets
</li>
<li id="menu-item-431" class="menu-item-431">Fire extinguishers
</li>
<li id="menu-item-432" class="menu-item-432">Fire alarms
</li>
</ul>
</li>
<li id="menu-item-426" class="menu-item-426">FAQs
</li>
<li id="menu-item-420" class="menu-item-420">Contact Us
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
CSS
#main_navbar_container{
margin-bottom:0;
background:white;
}
.navbar-collapse {
text-align:center;
}
#menu_container{
width:80%;
float:right;
display:block;
}
#primary_menu{
display:block;
float:left;
width:100%;
}
#primary_menu ul{
list-style: none;
margin: 0;
padding-left: 0;
}
#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
color:#ea474b;
font-weight: 600;
display: block;
text-decoration: none;
padding: 15px 20px;
margin:auto;
}
#primary_menu a:hover{
color:#F9690E;
background: #f1f1f1;
}
#primary_menu li{
float:left;
position:relative;
margin:0
}
#primary_menu ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width:100%;
color: #8c9398;
position: absolute;
top: 3.5em;
max-height:0;
overflow-y: hidden;
}
#primary_menu ul li:hover ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width: 200px;
position:absolute;
padding:0;
margin:0;
max-height:400px;
left:-50px;
z-index:999;
transition: max-height 1s;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
}
.sub-menu li{
width:100%;
}
#primary_menu ul li ul a{
color:#ea474b;
}
#primary_menu ul li ul li:hover a{
color:#F9690E;
background: #f1f1f1;
}
#media (max-width: 1200px){
#main_navbar_container .container, #menu_container { width: 100%;}
#menu_container .navbar-collapse { padding: 0;}
#primary_menu{
width:100%;
margin:0;
}
#primary_menu li{
width:100%;
margin:5px 0 0 0;
}
#primary_menu ul li ul {
border-radius: 0 !important;
border-color: transparent !important;
background-color:rgb(238,238,238);
display:block;
max-height:0;
-webkit-transition: all 0s;
transition: all 0s;
}
#primary_menu ul li:hover{
background:none;
}
#primary_menu ul li:hover a{
font-color:black;
/*\color:rgb(207,0,15);*/
}
#primary_menu ul li:hover ul{
display:block;
position:initial;
background-color:rgb(238,238,238);
width:100%;
padding:0;
margin:0;
max-height:400px;
transition:max-height 1s;
}
#primary_menu ul li:hover li:first-of-type{
border-top:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover li:last-of-type{
border-bottom:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover a:link,
#primary_menu ul li:hover a:visited{
color:#ea474b;
}
#menu-home-screen-menu{
margin-left:0;
}
}
Fiddle to explain: http://jsfiddle.net/ee7zdtb4/
Help is greatly appreciated.
Regards,
J

We'd like to make the sub-menus expand by clicking their parent li
whenever the screen resolution is 1200px or less
You would need to use media-queries to detect the screen size and then change your CSS accordingly.
it seems like it's only achievable through javascript / jquery
No. Not at all. You can very well do this with just a clever mix of elements with corresponding pseudo-classes and adjacent sibling selector. Hint: use hidden checkboxes with labels to control the sibling elements.
Here is a small demo. It's based on an old answer of mine, changed to add media-queries to allow for fully expanded accordion style menu when the screen is larger than 768px (you can tweak it to your use-case of 1200). It gets collapsed and then is controlled by click-able first-level menu items. No Javascript, just CSS.
In the fiddle, drag and resize the output pane to see it in action. In the snippet, click full-screen and back to see it in action. Use this demo to then take it forward for your exact use-case.
Demo Fiddle: http://jsfiddle.net/abhitalks/Lqpc2Len/
Demo Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: sans-serif; font-size: 1em; }
div.accordion {
display: inline-block; vertical-align: top;
width: 240px; margin: 16px; border: 1px solid #ddd;
}
div.accordion label:last-of-type { border: none; }
input { display: none; }
input + label {
display: block; background-color: #eee;
padding: 8px; cursor: pointer; border-bottom: 1px solid #ddd;
font-family: 'segoe ui', sans-serif; font-weight: 300; transition: all 0.25s;
}
input + label:hover { background-color: #ddd; }
input + label::before {
content: '→';
display: inline-block; margin-right: 6px;
font-family: calibri, sans-serif; font-weight: 400; transition: all 0.5s;
}
div.content {
overflow: hidden; height: 0px; padding: 0px;
font-family: calibri, sans-serif; font-weight: 300;
background-color: rgba(250,250,250,0.6); transition: all 0.5s;
}
input:checked + label + div.content { height: 64px; padding: 6px; }
input:checked + label { background-color: #ddd; }
input:checked + label::before { font-weight: 600; transform: rotate(90deg); }
#media screen and (min-width: 768px) {
div.content { height: 64px; padding: 6px; }
input + label::before { font-weight: 600; transform: rotate(90deg); }
}
<div class="accordion">
<input id="i12" name="handle2" type="checkbox" />
<label for="i12">One</label>
<div class="content">Lorem ipsum</div>
<input id="i22" name="handle2" type="checkbox" />
<label for="i22">Two</label>
<div class="content">Lorem ipsum</div>
<input id="i32" name="handle2" type="checkbox" />
<label for="i32">Three</label>
<div class="content">Lorem ipsum</div>
<input id="i42" name="handle2" type="checkbox" />
<label for="i42">Four</label>
<div class="content">Lorem ipsum</div>
</div>

You can achieve all your needs in responsiveness with css media queries. If you specify max-width condition and describe all your necessary css-classes behaviour for specified width, you would have another stylings for current element at different resolution. For example,
.foo-class {
background-color: green
}
.foo-class:hover {
background-color:red;
color: white;
}
#media only screen and (max-width: 768px) {
.foo-class {
background-color: blue;
}
.foo-class:hover {
background-color: white;
color: green;
}
}
So in this case when you have monitor/screen with actual width >768px element with class .foo-class will have green background and on hover it will be with red background and white text color. If your screen of width 768px or less, then this element will be of blue background and with white background and green text color on hover action. It does not need any additional javascript logic, its pretty simple.
Also you can use popular ui framework Bootstrap. It's very simple, has a lot of modern ui features and has built in responsive support

wrapping text in css div

Hi guys for some reason my text is not wrapping in Div, I have three divs placed inline-block and floating left. If i don't use floating left the the divs gets pushed down.
CSS code
#OuterSection
{
border-top: 10px solid #0272b0;
border-left: 5px solid #0272b0;
border-bottom: 5px solid #0272b0;
border-right: 5px solid #0272b0;
border-radius: 10px;
background-color: #0272b0;
width:250px;
height: auto;
display:inline-block;
}
#InnerSection
{
width:auto;
height:auto;
text-align:center;
background-color: #FFF;
border-radius: 5px;
text-align:left;
word-wrap: break-word;
float:left;
}
#SectionTitle
{
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
}
HTML code here
<div id="OuterSection">
<span id="SectionTitle">section1</span>
<div id="InnerSection">
testtesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section2</span>
<div id="InnerSection">
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section3</span>
<div id="InnerSection"></div></div>

#Section{display:inline-block;}

Fix can be found here: DEMO
Used word-wrap:break-word; on your innerSection with width:100%;