SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    818
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    some of my divs do not reach all they way to the side of the browser window.

    using bootstrap. Pretty fun and interesting over all.
    I just have this prob where some of my divs w/a span12 reach all the way to the side of the browser window. and two dont' stopping about 50px shy on each side.

    reachToSides.jpg
    I put my code below. I have used the original bootstrap settings for width. they are just span12 so they should reach across.
    Code:
     <!DOCTYPE html>
        <html>
        <head>
        <title>cdiStuff</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    	<link href="style.css" rel="stylesheet" media="screen">
    		
    
        </head>
    	
    	
    	
    	
    	
    	
    <body>
    <div class="container-fluid">
    
    <div id="preHeader" class="row-fluid">
    <div class="span4">
    	    <p>this would be the preheader</p>
    </div>	
    <div class="span8">
    <form class="navbar-search pull-right">
      <input type="text" class="search-query" placeholder="Search">
    </form> 
    </div>
    </div> <!-- row-fluid preHeader end -->
    
    
    <div class="row-fluid">
    	<header class="row-fluid"> 
    		<div class="span12">
    			<img src="coreImg/coreLogo100x100px.png" />
    		</div>	
    	</header>
    </div> <!-- row-fluid header end -->
    	
    
    	
    <nav class="row-fluid">
    <nav class="navbar">
    <div class="navbar-inner">
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </a>
    <a class="brand" href="#">core</a>
    <div class="nav-collapse collapse">
    <ul class="nav">
    <li class="active"><a href="#">home</a></li>
    <li><a href="#">page01</a></li>
    <li><a href="#">page02</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">blog</a></li>
    </ul>
    </div> <!-- collapseCollapse end -->
    </nav>
    </div> <!-- nav row-fluid end -->
    </nav> <!-- row-fluid end -->
    
    
    <div id="postNav" class="row-fluid">
    <div class="span12">
    	    <p>this would be the postNav</p>
    </div>		
    </div> <!-- row-fluid postNav end -->
    
    
    
    
    
    <div  class="row-fluid">
    <div id="minHeader01" class="span8 offset4"> 
    	 <h4>it's a span8 kinda world</h4>
    	 <p>similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p>
    </div>
    </div> <!-- row-fluid end -->
    
    	
    
    <section id="mainBox">	
    <div class="row-fluid">
    <div class="span4 offset4"> 
    	 <h3>Temporibus</h3>
    	  <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
    </div>
    <div class="span4"> 
    	 <h3>Temporibus</h3>
    	 <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
    </div>
    </div> <!-- row-fluid end -->
    	
    <div class="row-fluid">
    <div class="span4 offset4"> 
    	 <h3>Temporibus</h3>
    	  <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
    </div>
    
    <div class="span4"> 
    	 <h3>Temporibus</h3>
    	  <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
    </div>
    </div> <!-- row-fluid end -->
    </section>
    
    
    <div  class="row-fluid">
    <div id="preFooter" class="span12"> 
    
    <div id="vid01" class="span4"> 
    			<img src="coreImg/placehldr320x200.png" />
    
    
    </div>
    
    <div id="vid01" class="span4"> 
    
    			<img src="coreImg/placehldr320x200.png" />
    
    </div>
    
    <div id="vid01" class="span4"> 
    
    			<img src="coreImg/placehldr320x200.png" />
    
    </div>
    
    </div>
    </div> <!-- row-fluid end -->
    
    <div class="row-fluid">
    <footer class="span12">
    footer stuff
    </footer>
    </div>
    
    
    </div> <!-- container-fluid end -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
    	
        </body>
        </html>
    Any advice on how to fix this please?
    thx
    Attached Images Attached Images
    Last edited by Paul O'B; May 9, 2013 at 12:47. Reason: code tags added


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •