CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Raphael
Raphael

Reputation: 562

Bootstrap 2 span6

I have got a simple question. And I think the answer will be that easy for you too. I am using Bootstrap for a website. All files are downloaded and connected in my php File. I have got a container div with class container. In it all the website foo, such as header, ..., will happen. Now I code two span6 divs in the header. I would like to have them next to each other. Like it is thought. But they the second div is displayed under the first div. What am I making wrong?

Here are my files: index.php

<!doctype html>
<!-- Developer: Raphael Klein - http://austrianmultimedia.at/ -->
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="<?php echo $sitePath; ?>">
    <meta name="author" content="<?php echo $author; ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="">
    <link rel="apple-touch-icon" href="">
    <script src="js/jquery-1.10.1.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>

    <!-- my CSS -->
    <link rel="stylesheet" href="css/doktorhaiden.css">
</head>
<body>
    <div id="container" class="row, container">
        <header>
            <?php include("header.php"); ?>
        </header>
        <div class="row">
            <div id="left" class="span4">
                <div class="element" id="navLeft">
                    <ul>
                        <li><h1><a href="">Home</a></h1></li>
                        <li><h1>Über uns</h1></li>
                        <li><h1>Kontakt</h1></li>
                    </ul>
                </div> <!-- element -->
            </div> <!-- left -->
            <div id="right" class="span8">
                <div id="home" class="element">
                    <h1><hr width="100px">Willkommen<hr width="200px"></h1>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <img class="thumbnail" src="graphics/placeholder.png">
                </div> <!-- home -->
                <div id="ueberuns" class="element">
                    <h1><hr width="100px">Über uns<hr width="300px"></h1>
                    <div class="span4">
                        <h2>Dr. (med) Katharina Haiden</h2>
                        <img class="thumbnailHoch" src="graphics/placeholderHoch.png">
                    </div>
                    <div class="span4">
                        <h2>Dr. (med) Elmar Haiden</h2>
                        <img class="thumbnailHoch" src="graphics/placeholderHoch.png">
                    </div>
                </div> <!-- ueber uns -->
            </div> <!-- right -->
        </div>
    </div> <!-- container -->
</body>
</html>

my header.php

<div class="row">
    <div id="span6" style="background-color:red">
        sahdkad
    </div>
    <div id="span6" style="background-color:blue">
        salkjdhsa
    </div>
</div>

and finally my css-File

/* Developer: Raphael Klein - http://austrianmultimedia.at/    */


/* @group undo defaults margins and paddings */
/* INIT */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, , span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;    
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* -------------------------------------  @end INIT */
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 0px;
}
.row {
  margin-left: 0px;
  *zoom: 1;
}


#container {

}

body {
    background-color: #fff;
    font-family: 'Raleway', sans-serif;
    line-height: 21px;
}
header {
    height: 100px;
}
#left {
    background-color: #3F3F3F;
    text-align: right;
}
#right {
    margin-left: 10px;
}


#left h1 {
    color:#5AD1E5;
    font-size: 2em;
    line-height: 0.7em;
}
#right h1 {
    font-size: 2em;
}
#right h2 {
    font-size: 1em;
    color: #CC9E44;
}
#right h1 hr {
    display: inline-block;
    top: 12px;
    left: 10px;
    position: relative;
    border: 0;
    border-top: 2px solid #5AD1E5;
    margin-right: 20px;
}
.element {
    padding:10px 10px 10px 10px;
}


#navLeft {
    margin:0px 10px 20px 0px;
}
/* Seitenbereiche */
#home {
    /*background-color: #FFCE00;*/
}




/* Images */
.thumbnail, .thumbnailHoch {
    border: 1px solid #5AD1E5;
    padding: 10px 10px 10px 10px;
}
.thumbnail {
    width: 350px;
}
.thumbnailHoch {
    height: 200px;
}


hr {
    /*height: 24px; 
    background: url('flourish.png') 
    no-repeat 50% 50%; 
    margin: 3em 0; 
    border: 0;*/
}

I would be very happy, when you can help me! Yours, Raphael

Upvotes: 0

Views: 507

Answers (2)

Jeroen Vannevel
Jeroen Vannevel

Reputation: 44438

Use class instead of id.

<div class="span6">

Upvotes: 1

vee
vee

Reputation: 38645

Isn't it supposed to be class="span6"? Try the following: 

<div class="row">
    <div id="span6" class="span6" style="background-color:red">
        sahdkad
    </div>
    <div id="span6" class="span6" style="background-color:blue">
        salkjdhsa
    </div>
</div>

Upvotes: 1

Related Questions