Problem with resizing browser size

Page 1 of 1

6 Replies - 624 Views - Last Post: 04 April 2012 - 02:59 PM

#1 diagnonsense  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 11-February 12

Problem with resizing browser size

Posted 03 April 2012 - 03:43 PM

I believe this is a quick fix that you won't need my code, but if anyone does let me know.
On this page: http://chris-snow.com/about.html, when the browser window is resized vertically, the image and table content end up going below the sidebar.
Is there anyway to "stop" the content from moving when it "hits" the sidebar?

Thanks in advanced.

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with resizing browser size

#2 DimitriV  Icon User is offline

  • Don't try to save yourself… the circle is complete
  • member icon

Reputation: 544
  • View blog
  • Posts: 2,632
  • Joined: 24-July 11

Re: Problem with resizing browser size

Posted 03 April 2012 - 03:46 PM

It is best to see the code, my school proxy prevents me from seeing the webpage :)
Was This Post Helpful? 0
  • +
  • -

#3 diagnonsense  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 11-February 12

Re: Problem with resizing browser size

Posted 03 April 2012 - 06:46 PM

Ahh, I didn't think of that.
Here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chris Snow | About</title>
<style type="text/css">
<!--
body {
		background: #1C2020;					
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color:white;
	font-family:Arial, Helvetica, sans-serif;
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
	padding: 10px 10px 10px 10px;
}

img.border{
	border: none;
	padding: 10px 10px 10px 10px;}


a:link, a:visited {
	color: #FFF;}


a:hover, a:active, a:focus { 
	text-decoration: none;
	text-weight: heavy;
}

/* ~~ this fixed width container surrounds all other divs ~~ */
.container {
	width: 520px;
	margin: 0 auto; 
	overflow: visible; 
	padding-top:20px;
	
}

.sidebar1 {
	float: left;
	width: 180px;
	height: 300px;
	padding-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.content {
	padding: 5px 0;
	width: 520px;
}


.content ul, .content ol { 
	padding: 0 15px 15px 10px; 
}

ul.nav {
	list-style: none; 
	margin-bottom: 15px; 
}
ul.nav a, ul.nav a:visited { 
	padding: 2px 2px 5px 15px;
	display: block; 
	width: 160px; 
	text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	background: #2E080D;
	color: #FFF;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style></head>

<body>


  <div class="sidebar1">
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="#"><strong>About</strong></a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>
    
    <p> This will be all set up soon, I promise.
    Just have to figure out who goes where. In the mean time look at the fancy graphic.</p>
    <p>&quot;OoOoOohh aaAaAahhh&quot;<!-- end .sidebar1 --> they all said collectively. </p>
<p>-<strong>Chris</strong></p>
</div>
 <div class="container">
   <div class="content">
   
   <img src="http://farm8.staticflickr.com/7055/6861097931_21a43a17e1.jpg" class="border"/><br />
   <table width="150px" class="border" align="center">
   <th colspan="3"><h3>connect with me</h3></th><tr>
   <td>email:</td><td colspan="2"><a href="chrissnow@me.com">chrissnow@me.com</a>
   </td></tr>
   <tr><td><a href="http://flickr.com/photos/chriddy">flickr</a></td><td><a href="http://vimeo.com/chrissnow">vimeo</a></td></tr></table>
    <!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 Valkerion  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 265
  • Joined: 13-January 09

Re: Problem with resizing browser size

Posted 04 April 2012 - 01:56 AM

actually on firefox v11 everything seems to be working smoothly.
Was This Post Helpful? 0
  • +
  • -

#5 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Problem with resizing browser size

Posted 04 April 2012 - 02:26 AM

It wasn't dropping down in FF, but I saw the issue in IE9 and Chrome. You'll need to add 
min-width
to your container div, and set it to around 900px.
Was This Post Helpful? 0
  • +
  • -

#6 diagnonsense  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 11-February 12

Re: Problem with resizing browser size

Posted 04 April 2012 - 02:49 PM

I added a min-width tag but the problem still persists in safari, any suggestions?
Was This Post Helpful? 0
  • +
  • -

#7 diagnonsense  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 11-February 12

Re: Problem with resizing browser size

Posted 04 April 2012 - 02:59 PM

The page here: http://chris-snow.com/animals/ is also doing the same thing in all three browsers on my computer (firefox, safari and chrome)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1