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

**pdxSherpa** · May 8, 2013 22:34

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

**ronpat** · May 8, 2013 22:57

pdxSherpa, I'd like to make a couple of requests of you.

1) We always need to see the css that goes with the HTML. So you need to give us the css that is causing the above HTML to misbehave. A link to the live site or live test page might be easiest.

2) When posting a long selection of code (or any code for that matter) use [code] tags instead of the HTML code tags.
The reason is that the [code] tags generate vertical scrollbars and do not use up so much vertical space in the message.

Just type:
[code]

and paste your code in the middle

[/code]

You can use two sets if needed, one for the css and one for the HTML if they are separate.

Thanks

**pdxSherpa** · May 8, 2013 23:11

Dear ronpat...how can I disagree with someone who has a picture of such a reasonable looking cat for avatar.

So...sorry didn't know about the code vs html tag behaviors. with any other longer code I promise to use the code tags in the future.
Good point about the css. but in this case for the width it was just the bootstrap standard. I will try to put the site live by the weekend if that helps.
Thank you.
D

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions