im trying to place text on top of Google Maps (an API). Right now the text is being placed above the maps in a separate section. I have tried position:absolute, but then it places behind the maps.
This is how it looks now: https://jsfiddle.net/uy2jza2k/1/
I want it to look like this: https://gyazo.com/dbacba06c463c4ec09504a0f62d44a36
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>
<div id="billede">
<div>
<nav>
<ul id="menu">
<li>Top</li>
<li>Om Eventet</li>
<li>Lokation</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
<div id="logodiv">
<img src="design/logotop.png">
</div>
<div id="overskrift">
<h1>EVENTET STARTER OM</h1>
</div>
<div id="countdowner">
<table id="table">
<tr>
<div id="countdown">
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
</div>
<tr>
<tr>
<td class="timeLabel">DAGE</td>
<td class="timeLabel">TIMER</td>
<td class="timeLabel">MIN</td>
<td class="timeLabel">SEK</td>
</tr>
</tr>
</tr>
</table>
</div>
</div>
<h2>Hvad skal der ske?</h2>
<hr></hr>
<div id="infoydre">
<div id="information">
<p>Lorem ipsum dolor sit amet, duis facilisis eu, condimentum et mollis risus viverra adipiscing tristique. A ultricies, augue nibh scelerisque turpis consequat. Sapien id dui nulla quam viverra erat, sit sed, purus pulvinar amet justo. Dui nam at justo, ultricies id facilisis est non. Et vitae eget mi, pede sit duis orci eros corrupti. Tellus sem id
<br><br>
eget nam vel pede. Sed purus pharetra in sollicitudin suspendisse pellentesque, nec risus arcu nonummy, curabitur hymenaeos eu. Rutrum aliquet, et sit ut integer praesent sit cras, aliquet molestie pellentesque neque quam luctus odio</p>
<p>Lorem ipsum dolor sit amet, duis facilisis eu, condimentum et mollis risus viverra adipiscing tristique. A ultricies, augue nibh scelerisque turpis consequat.
<br><br>
Sapien id dui nulla quam viverra erat, sit sed, purus pulvinar amet justo. Dui nam at justo, ultricies id facilisis est non. Et vitae eget mi, pede sit duis orci eros corrupti. Tellus sem id. eget nam vel pede. Sed purus pharetra in sollicitudin suspendisse pellentesque, nec risus arcu nonummy, curabitur hymenaeos eu. Rutrum aliquet, et sit ut integer praesent sit cras, aliquet molestie pellentesque neque quam luctus odio</p>
</div>
</div>
<div id="sikkerydre">
<div id="sikkerindre">
<h2>Sikkerhed</h2>
<hr></hr>
<p>arrangementet vil være under fuldt opsyn af de lækreste
babes skive har at tilbyde med.<br> pharetra in sollicitudin suspendisse pellentesque, nec risus </p>
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
<h2 id="hvid2">Test</h2>
<style type="text/css">
/* Set a size for our map container, the Google Map will take up 100% of this container */
#map {
width: 100%;
height: 100%;
}
</style>
<!--
You need to include this script tag on any page that has a Google Map.
The following script tag will work when opening this example locally on your computer.
But if you use this on a localhost server or a live website you will need to include an API key.
Sign up for one here (it's free for small usage):
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
After you sign up, use the following script tag with YOUR_GOOGLE_API_KEY replaced with your actual key.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script>
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
scrollwheel: false,
navigationControl: false,
zoomControlOptions: false,
zoomControl: false,
mapTypeControl: false,
zoom: 15,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(56.5760701, 9.0522028,591), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.5760701, 9.0522028,591),
map: map,
title: 'Surf & Grill Strandvejen'
});
}
</script>
<!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
<div id="map"></div>
</div>
<div class="col span_1_of_2">
<img width="100%" src="design/squarebox.jpg">
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
<img width="100%" src="design/squarebox2.png">
</div>
<div class="col span_1_of_2">
<h2 id="hvid">Besøg vores Facebook</h2>
<hr></hr>
<p>Hej med dig</p>
</div>
</div>
</body>
</html>
<script>
CountDownTimer('06/25/2016 10:00 AM', 'id');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id+"1").innerHTML = days;
document.getElementById(id+"2").innerHTML = hours;
document.getElementById(id+"3").innerHTML = minutes;
document.getElementById(id+"4").innerHTML = seconds;
}
timer = setInterval(showRemaining, 1000);
}
</script>
CSS
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Montserrat:400|Raleway:400,500,600,700,800|);
body {
margin:0;
}
#billede {
background:url(baggrund.jpg) no-repeat;
background-size: cover;
height: 100vh;
/*background-position: top center;*/
}
#logodiv {
float: left;
text-align:center;
width:100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-220%);
}
#logodiv>img {
width:15em;
}
h1 {
font-family:raleway;
font-weight:100;
width:100%;
text-align:center;
color:white;
letter-spacing:11px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-230%);
font-size:2.5em;
white-space: nowrap;
}
#countdowner {
font-family:sans-serif;
color:white;
position:absolute;
margin:0;
padding:0;
width:100%;
font-size:2em;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-20%);
}
#id1 {
font-size:2.5em;
}
#id2 {
font-size:2.5em;
}
#id3 {
font-size:2.5em;
}
#id4 {
font-size:2.5em;
}
.timeLabel {
font-size:0.7em;
color:#f1a01e;
font-family:montserrat;
font-weight:700;
}
#table {
margin:0 auto;
text-align:center;
}
#table td{
padding:0px 45px;
}
#menu {
position:absolute;
padding:0;
width:100%;
bottom:0;
text-align:center;
float: left;
}
#menu>li {
font-size:20px;
list-style:none;
display:inline-block;
text-transform:uppercase;
letter-spacing:3px;
font-family:raleway;
font-weight:400;
}
#menu>li>a {
padding:0 15px;
text-decoration:none;
color:white;
}
#menu>li>a:hover {
color:#f1a01e;
}
h2 {
text-align: center;
font-size: 2.2em;
font-family:raleway;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 700;
margin: 0;
padding-top: 70px;
color: #171717;
padding-bottom: 10px;
white-space: nowrap;
color:black;
}
p {
color: #171717;
margin: 0;
line-height: 35px;
font-size: 23px;
letter-spacing: 2px;
font-family: raleway;
}
hr {
width: 160px;
height: 5px;
background-color: #4bc9f4;
border: 0;
}
#infoydre {
width: 100%;
}
#information {
margin: auto;
width: 80%;
padding-top: 40px;
padding-bottom: 90px;
left:0;
right: 0;
top: 0;
bottom: 0;
column-count: 2;
}
#sikkerydre {
background:url(sikkerhed.jpg) no-repeat;
background-size: cover;
width: 100%;
}
#sikkerindre {
margin: auto;
width: 80%;
left:0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
#sikkerindre>p {
padding-top: 40px;
padding-bottom: 90px;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 0% 0 0% 0%;
height:30vw;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 50%;
background-color:#363636;
overflow:hidden;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#hvid {
color:white;
}
#hvid2 {
color:white;
position:relative;
}
Try adding:
z-index:99;
to the text. This should ensure that it appears in front the map instead of behind
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to create a space above "Affordable Professional Web Design" in the image below, so that it creates a space which is occupied by the image
However when I do so, it only seems to push the image down and leaves white space (indicated in red). I am trying to do this by applying margin-top although cannot find a resolution. Any ideas how to resolve?
Web Page Image
/* Global */
.container {
width: 80%;
margin: auto;
overflow;
hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: #35424a;
border-bottom: orange solid;
min-height: 70px;
padding-top: 30px;
color: #ffffff;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header li {
float: left;
list-style: none;
padding: 0 10px 0 10px;
}
header nav {
float: right;
text-transform: uppercase;
}
header a {
text-decoration: none;
color: #ffffff;
}
#highlight,
#current a {
color: #e8491d;
}
nav a:hover {
color: orange;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../countryside.jpg') no-repeat;
background-size: cover;
text-align: center;
color: #ffffff;
}
#showcase h1 {
margin-top: 100px;
padding: 30px;
text-align: center;
color: #ffffff;
font-size: 50px;
}
#showcase p {
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" width="device-width" />
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span id="highlight">Test</span> Web Design</h1>
</div>
<nav>
<ul>
<li id="current">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
mollis.
</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<form>
<h2>Subscribe to our newsletter</h2>
<input type="email" placeholder="Enter email..." />
<button type="submit">Submit</button>
</form>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">
<img src="HTML.png" alt="" />
<h3>HTML Markup</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="css.png" height="200px" alt="" />
<h3>CSS3 Styling</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="graphic_design.svg" height="300px" alt="" />
<h3>Graphic Design</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
</div>
</section>
</body>
Instead of margin try using padding:
#showcase h1{
padding:100px 30px 30px 30px;
text-align:center;
color:#ffffff;
font-size:50px;
}
I currently have a site I'm working on ( copying another site as Practice )
This is the site I am trying to re-create
http://www.north2.net/
.
I am almost done, however I cannot position the two side sections(left and right of main image) correctly.
Can anyone help me out?
I have 3 "sections" left, middle, right, all are in a wrapper
I've tried
margin-top,
removing inline-block on the wrappers
...
MY GOAL :
Is to be able to raise the two side bars to my liking, but I don't see how to raise them in any way.
north2.net to see what I mean.
JSFIDDLE
http://jsfiddle.net/abXk4/
Not Important ::
Also, when I position anything, my background image moves and there is a white gap on the bottom of the page, my screen is 1920 x 1080, so any adjustment makes a white space,
I've been fixing this with
padding-bottom: X%;
Is this just something I have to do? Or is it because I coded incorrectly.
HTML
<title> ENTER TITLE </title>
</head>
<body>
<div id='page'>
<!--All of Left Side Bar Contents -->
<div class="swrap">
<div id="logo">
<img src="img/logo_green.png">
</div>
<div id="about">
<aside class="tlb"><p>About Us</p></aside>
<p>Welcome. We are Author, nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
<div id="services">
<aside class="tlb"><p>Services</p></aside>
<ul>
<li>Web Site Dev and Applications </li>
<div class='hr'></div>
<li>CMS</li>
<div class='hr'></div>
<li>Digital Branding and Industry</li>
<div class='hr'></div>
<li>UI Design</li>
<div class='hr'></div>
<li>Social Media</li>
<div class='hr'></div>
<li>User Experience</li>
<div class='hr'></div>
<li>Creative Ingenuity</li>
</ul> </div>
</div>
<!-- Center Content ( main header, main image ) -->
<div class="mwrap">
<!-- Main Nav Above Slider -->
<nav class='mnav'>
<ul>
<li class="m1"><a href='#'>home</a></li>
<li class="m2"><a href='#'>Author</a></li>
<li class="m3"><a href='#'>work</a></li>
<li class="m4"><a href='#'>clients</a></li>
<li class="m5"><a href='#'>contact</a></li>
</ul>
</nav>
<div id="fimg">
<img src="img/fumic_naslovna.jpg">
</div>
<div id="featart">
<article>
<h1>Lorem Ipsum</h1>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>
</article>
</div>
</div>
<div id="rwrap">
<div class="rfc">
<aside class="tlb">Featured Clients</aside>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus.</p>
<div class='hr'></div>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background-image: url(img/brown.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
padding-bottom:12%;
color: #fff;
font-weight: bold;
font-size: large;
text-align: left;
}
* {
border-radius: 1px;
}
#page {
margin: 30px 25%;
width: auto;
/* width should be 50% ... 25% on each side, 50% in middle, centered!*/
border: 2px solid black;
}
/*Left Content Begins ------------------ */
.swrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
margin-top: 100px;
}
#logo {
background-color: rgba(0,0,0,.7);
}
#about {
margin: 3px 0;
background-color: rgba(89, 194, 141, 1);
padding: 5%;
}
#about aside {
margin-left: -6% !important;
}
#services {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
margin: 3px 0;
}
.tlb {
background-color: rgba(0,0,0,.6);
width: 75%;
margin: -10px 0 0 -2% !important;
padding-left: 4%;
}
/*Middle Content Begins ------------------ */
.mwrap {
width: 48%;
margin: 0 auto;
/*1% margin on each side for .mwrap*/
display:inline-block;
}
.mnav ul {
list-style:none;
}
.mnav ul li {
display: inline;
font-size: large;
font-weight:bold;
padding: 2px 2%;
border-radius: 1px;
}
.mnav ul li a {
text-decoration: none;
color: #fff;
}
.m1 {background-color:rgba(46, 206, 87, 1); }
.m2 {background-color: rgba(39, 197, 80, 1); }
.m3 {background-color: rgba(70, 182, 99, 1); }
.m4 {background-color: rgba(64, 164, 90, 1);}
.m5 {background-color: rgba(63, 140, 83, 1); }
.mnav ul li:active {
background-color:none !important;
}
.mnav li:hover {
background-color: rgba(0,0,0,.3);
}
#fimg {
width: 100%;
}
#fimg img {
width: 100%;
}
#featart {
margin-top: -10px;
background-color: rgba(64, 164, 90, .9);
padding: 1% 1%;
}
/*Right Content Begins ------------------ */
#rwrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
}
.rfc {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
}
.rfc .tlb {
margin-top: 9px !important;
margin-left: -2.3% !important;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
The easy way is to use position relative position: relative; bottom: [how ever many pixels]
A better (and later much more flexible) way is to change you HTML structure a little bit.
If I were building this site I'd break it into two wrapping divs with three column divs under each of them like here:
<div class="header">
<div class="left-column">
<img id="logo" src="img/logo.png" />
</div>
<div class="middle-column">
<ul class="nav"></ul>
</div>
<div class="right-column">
Put content here if you want it
</div>
</div>
<div class="content">
<div class="left-column">
Content in left column
</div>
<div class="middle-column">
Content in middle
</div>
<div class="right-column">
Content on right
</div>
</div>
Now, use CSS to float those columns just like you did before. The difference with this is you can define a height for the header and the logo and navigation will be much easier to align as they are separate from the other columns.
If you want to get more technical check out CSS Flexbox, it would work well here.
http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
set
a position: relative;
bottom: X px;
HTML Code
<header>
<h1>Event Heading</h1>
<div class="meta">09 JUL 2014</div>
<div class="textblock">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
</header>
Issue
I have this HTML structure which I can not edit/rearrange. I would like to position the h1, div.meta and div.textblock is as in the picture below.
I can't work it out with floats the way I want to because of the sequence of the HTML.
Illustration
This can be achieved with absolute positioning:
header {
position: relative;
min-height: 100px; }
div.meta {
position: absolute;
width: 100px; height:100px;
top:0; left:0;
border: 1px solid red; }
header h1 {
margin-left: 120px;
border-bottom: 2px solid red; }
header div.textblock { margin-left: 120px; }
See fiddle: http://jsfiddle.net/utsKx/
You can change the div.meta widths and h1/textblock margin-left to percentages if you want a responsive layout.
EDIT
Added min-height to header to ensure div.meta never falls outside the parent header block. (Thanks for MarcAudet for pointing this out)
See this example:
Codepen Example
I think this is what you're looking for!
You can use this demo
Code Pen Demo
HTML
<header>
<div class="meta L">09 JUL 2014</div>
<h1 class="R">Event Heading</h1>
<div class="textblock R">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
</header>
CSS
header
{
width:650px;
display:inline-block;
}
.meta
{
width:150px;
height:150px;
border:1px solid red;
margin:5px;
font-size:22px;
text-align:center;
}
h1,.textblock
{
width:400px;
text-align:left;
border:1px solid red;
}
h1
{
color:#B1003B;
margin-top:5px;
}
.textblock
{
margin-top:-22px;
}
.L
{
float:left;
}
.R
{
float:right;
}
.C1
{
color:#000000;
font-weight:bold;
font-size:36px;
}
.C2,.C3
{
color:#777777;
}
JQuery
var str = $(".meta").html();
s = str.split(' ');
$(".meta").html("<span class='C1'>"+s[0]+"</span></br><span class='C2'>"+s[1]+"</span></br><span class='C3'>"+s[2]+"</span>");
Been having issues trying to get my floated elements to extend with all of my content. I've done some research but I have become officially stumped/exhausted. I've attempted a few clearfix resolutions, standard, micro, and inline, essentially everything listed in this post.
My theories:
Something wrong with my syntax, or I'm not placing the <div> in the correct place.
I'm handling the content, or posts, in a fashion that will not allow me to extend the wrapper.
I'm an extremely special window licker.
My Code
Stylesheet:
/*------------------------Wrapper------------------------*/
html, body, #wrapper, .bar, .line, .content{
margin: 0;
padding: 0;
height: 100%;
}
#wrapper{
width: 100%;
overflow: auto;
}
.bar{
float: left;
width: 5%;
}
.line{
float: left;
width: 1%;
}
.content{
float:left;
width:88%;
}
.white{
background-color: #FFFFFF;
}
.red{
background-color: #A80000;
}
.black{
background-color: #000000;
background-image:url('http://i.imgur.com/bcq2U.png');
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
}
/*------------------------Navigation------------------------*/
#nav{
width: 100%;
float: left;
background-color: #A80000;
border-bottom: 1px solid #C4A23E;
}
ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
font-family: "Arial";
}
li{
float: left;
}
li a{
display: block;
padding: 8px 15px;
text-decoration: none;
color: #000000;
background-color:#A80000;
border-right: 1px solid #C4A23E; }
li a:hover{
color: #A80000;
background-color: #C4A23E;
}
/*------------------------Text------------------------*/
h1 {
color: #FFFFFF;
font-family: "Arial";
text-alighn:center;
}
/*------------------------Boxes------------------------*/
.post{
float:left;
display:inline;
border-style:groove;
border-width:2px;
border-color:#A80000;
background-image:url('http://i.imgur.com/kOFxo.png');
background-repeat:no-repeat;
background-position: top left;
background-color:white;
width:60%;
margin:0px auto;
text-align:left;
padding:2px 5px 2px 5px;
margin:1cm 0cm 1cm 1cm;
}
.logbox{
float:left;
border-style:groove;
border-width:2px;
border-color:#A80000;
background-image:url('http://i.imgur.com/kOFxo.png');
background-repeat:no-repeat;
background-position:top left;
background-color:white;
margin:0px auto;
text-align:center;
padding:80px 80px 80px 80px;
margin:1cm 0cm 1cm 1cm;
}
/*------------------------ClearfixA------------------------*/
/*
.clearfix:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
.clearfix{
display:inline-block;
}
html[xmlns].clearfix{
display:block;
}
*html.clearfix{
height:1%;
}
*/
/*------------------------ClearfixB------------------------*/
.cf:before,
.cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom: 1;
}
Webpage:
<? include "config.php";
include_once "markdown.php";
$my_html = Markdown($my_text);
?>
<!-- HTML Start -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleB.css"/>
<title>Blog</title>
</head>
<body>
<!-- Wrapper Start -->
<div id="wrapper">
<div class="wrapper cf">
<span class="bar white"></span>
<span class="line red"></span>
<span class="content black">
<!-- Content Start -->
<h1>Project Hollywood</h1>
<div id="nav">
<?session_start();
if (!isset($_SESSION['username'])){?>
<ul>
<li>Sign In</li>
<li>Home</li>
</ul>
<?}
else{
?>
<ul>
<li>Home</li>
<li>Admin Panel</li>
<li>Sign Out</li>
</ul>
<?}
?>
</div>
<!-- Entries Start -->
<?$query= "SELECT *
FROM entries
ORDER BY submitted DESC";
$result= mysql_query($query);
$num = mysql_numrows($result);
?>
<?$i=0;
while ($i < $num){
$submit = mysql_result($result, $i, "submitted");
$title = mysql_result($result, $i, "title");
$content = mysql_result($result, $i, "content");
$userid = mysql_result($result, $i, "userid");
$id = mysql_result($result, $i, "id");
?>
<?$q = "SELECT username
FROM users
WHERE $userid = uid";
$r = mysql_query($q);
$username = mysql_result($r, 0, "username");
?>
<span class="post">
<h3><?=$title?></h3>
<?=$submit?><br/>
<?=$username?>
<p><?=$content?></p><br/>
<?$que = "SELECT t.tag
FROM tags AS t
INNER JOIN idx AS i ON t.tagid = i.tid
INNER JOIN entries AS e ON i.eid = e.id
WHERE e.id = '$id'";
$res = mysql_query($que);
$n = mysql_numrows($res);
$x=0;
?>
Tags:
<?while ($x < $n){
$tag = mysql_result ($res, $x, "tag");
$tid = mysql_result ($res, $x, "tid");
?>
<a href = "tag.php?tid=<?=$tag?>">
<?=$tag?></a>,
<?$x++;
}
?>
</span>
<?$i++;
}
?>
<!-- Entries & Content End -->
</span>
<span class="line red"></span>
<span class="bar white"></span>
</div>
</div>
<!-- Wrapper End -->
</body>
</html>
<!-- HTML End -->
Here is an image of what I am seeing on Chrome:
Any solutions, ideas, resources, help, advice would be greatly appreciated.
Also, I've read that FLOAT templates will be obsolete at some point in time and/or aren't the best way to design a webpage. Any suggestions or resources on how to do it otherwise would also be a welcomed response.
EDIT 4/24/13
Adding the code I receive after viewing the page source.
<!-- HTML Start -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleB.css"/>
<title>Blog</title>
</head>
<body>
<!-- Wrapper Start -->
<div id="wrapper">
<div class="wrapper cf">
<span class="bar white"></span>
<span class="line red"></span>
<span class="content black">
<!-- Content Start -->
<h1>Project Hollywood</h1>
<div id="nav">
<ul>
<li>Sign In</li>
<li>Home</li>
</ul>
</div>
<!-- Entries Start -->
<div class="post">
<h3>Lorem Ipsum Contd</h3>
2013-04-22 16:01:31<br/>
admin<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.</p><br/>
Tags:
<a href = "tag.php?tid=Lorem">
Lorem</a>,
<a href = "tag.php?tid=Ipsum">
Ipsum</a>,
<a href = "tag.php?tid=Lorem Ipsum">
Lorem Ipsum</a>,
</div>
<div class="post">
<h3>Lorem Ipsum</h3>
2013-04-22 00:12:40<br/>
admin<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.</p><br/>
Tags:
<a href = "tag.php?tid=Lorem">
Lorem</a>,
<a href = "tag.php?tid=Ipsum">
Ipsum</a>,
</div>
<!-- Entries & Content End -->
</span>
<span class="line red"></span>
<span class="bar white"></span>
</div>
</div>
<!-- Wrapper End -->
</body>
</html>
<!-- HTML End -->
Also a JS Bin replication.
In .content within your css, add overflow: auto; . This will wrap your div around your content automatically.
I'm having a small issue with one of my divs the #divSidebar not wrapping around it's child divs. It's probably something small that I probably overlooked, but I've been fussing with it for quite sometime. I believe it has something to do with a missing . I can get the content over to the side, but I had to add a innerSideBar div that was floated to the right.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html itemscope itemtype="http://schema.org/Blog" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Welcome to TutorialHelp!</title>
<link href="css/tutorialHelp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="divHeaderContainer">
<div id="divHeader">
<div id="divLogo"></div>
<div id="divNavigtation">
<div id="divNavMenu">
<ul>
<li> Home</li>
<li> Tutorials
<ul>
<li>Photoshop
<li>Dreamweaver
<li>Illustrator
<li>Flash
<li>InDesign
</ul>
</li>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div>
<div id="divSocial"></div>
</div>
</div>
</div>
<div id="divContentContainer">
<div id="divWrapper">
<div id="divInnerWrapper">
<div id="divContent">
<div id="divBanner"></div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="The Basics Of Photoshop">
<img width="200px" height="200px" src="images/photoshopBasicsImage.jpg" alt="PhotoshopBasicsImage" title="PhotoshopBasicsImage" />
</a>
<span class="metaWrapper">Photoshop</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Photoshop
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>The Basics Of Photoshop</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="Building A Basic Web Page In Dreamweaver">
<img width="200px" height="200px" src="images/dreamweaverBasicWebPageImage.jpg" alt="DreamweaverBasicWebPageImage" title="DreamweaverBasicWebPageImage" />
</a>
<span class="metaWrapper">Dreamweaver</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Dreamweaver
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>Building A Basic Web Page In Dreamweaver</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="Designing A Cartoon Environment">
<img width="200px" height="200px" src="images/flashCartoonEnvironmentImage.png" alt="FlashCartoonEnvironmentImage" title="FlashCartoonEnvironmentImage" />
</a>
<span class="metaWrapper">Flash</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Flash
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>Designing A Cartoon Environment</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divBottomBanner"></div>
</div>
<div id="divSidebar">
<div id="divInnerSideBar">
<div id="divAdWrapper">
<div class="adListing">Advertise Here</div>
<div class="adListing">Advertise Here</div>
<div class="adListing">Advertise Here</div>
<br class="clearFloat" />
</div>
<fb:comments href="http://www.facebook.com/pages/Tutorialhelp/497024140318879"
num_posts="4" width="300"></fb:comments>
<fb:like href="http://www.facebook.com/pages/Tutorialhelp/497024140318879" send="true" width="285" show_faces="true" font="verdana"></fb:like>
<div class="clearFloat"></div>
</div>
</div>
<div class="clearFloat"></div>
</div>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
min-width:1300px;
background-color:#83ACBC;
}
#divHeaderContainer{
width:100%;
height:200px;
background-color:#CEDBD9;
margin:0px auto;
}
#divHeader{
width:1120px;
height:200px;
min-width:1120px;
margin:0px auto;
background-image: url(../images/backgroundImage_r1_c1_r1_c1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#divLogo{
height:130px;
}
#divNavigation{
height:32px;
position:relative;
background-color:#333;
width:1120px;
}
#divNavMenu {
width:auto;
height:32px;
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
#divNavMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#divNavMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#DCE4E3;
}
#divNavMenu ul li a {
text-align:center;
height:30px;
width:148px;
display:block;
color:#000;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
border:1px solid #C5D1D0;
font-size: 16px;
font-weight: bold;
}
#divNavMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#divNavMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
#divNavMenu li:hover {
background:#83ACBC;
}
#divNavMenu ul li:hover ul li a:hover {
color:#FFF;
background:#9EBECB;
}
#divNavMenu a:hover {
color:#FFF;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
height:0px;
overflow:hidden;
}
/* IE7 Display Fix */
#divNavMenu ul li {
display: inline;
}
#divContentContainer{
margin:0px auto;
padding-bottom:50px;
width:100%;
background-image: url(../images/backgroundImage_r1_c1_r3_c1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#divWrapper{
width:1120px;
margin:0px auto;
background-image: url(../images/backgroundImage_r1_c1_r2_c1.jpg);
background-repeat: repeat-y;
background-position: center;
}
#divInnerWrapper{
margin:0px auto;
width:1088px;
}
#divContent{
width:738px;
float:left;
margin:0px auto;
}
#divBanner{
width:700px;
height:60px;
margin:0px auto;
padding-bottom:20px;
background-color:#D3DCDA;
}
#divListing{
padding:20px 20px 0px 18px;
margin:15px 0px 0px 0px;
}
.listing{
height:auto;
background:none;
border-bottom:solid 1px #B7B7B7;
}
#divListingLeft{
width:200px;
float:left;
margin:0px 0px 20px 0px;
}
#divListingRight{
width:480px;
float:right;
}
.metaWrapper{
font-family:Verdana, Geneva, sans-serif;
display:block;
width:200px;
font-size:14px;
text-align:center;
font-weight:bold;
color:#000;
}
.tags{
font-style:italic;
}
.date{
font-style:italic;
}
#divContent #divListing p{
padding:0 20px 0px 10px;
}
#divContent #divListing h1{
font-size:26px;
color:#000;
padding:0px 20px 0px 10px;
margin:0px;
}
h1 a{
font-style:normal;
text-decoration:none;
color:#000;
}
#divBottomBanner{
width:700px;
height:60px;
margin:0px auto;
padding-bottom:20px;
margin-top:35px;
background-color:#D3DCDA;
}
h2{
font-weight:bold;
font-size:24px;
margin:30px 0px 0px 20px;
padding-bottom:5px;
border-bottom:solid 1px #B7B7B7;
}
#contactForm{
padding:0px;
display: block;
height: auto;
margin-top: 30px;
margin-right: 160px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
}
#divSidebar{
}
#divInnerSideBar{
width:300px;
float:right;
}
#divAdWrapper{
width:260px;
height:auto;
}
.adListing{
display:block;
font-size:11px;
background-color:#D3DCDA;
color:#000;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
width:125px;
height:125px;
margin: 0px 4px 4px 0px;
}
I've added both html and css code and hopefully that will help you see where the problem is in the code. Any other problems with the code can be brought up, but looking for a solution to the #divSidebar and its child content.
Define your divSidebar
#divSidebar{
float:right;
}
demo