1 reply [Last post]
treypsu
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2006-06-02
Posts: 6
Points: 0

so i have a basic 2 colum layout and merely want to split the second column into two: message from the dean and news. I've tried playing aroud with the css and i always tend to bump the entire layout each time so any help is much appreciated.

in the css, rightcol is actually the left col (i moved it recently) and maincol is the content column i want to split. I'm not looking to turn this into a 3 column full layout, but just want to add another sub-column..

i want to split maincol and include news from the news div

html: http://www.shc.psu.edu/project/newindex/newindexmain.cfm
css: http://www.shc.psu.edu/project/newindex/newindexmain.css

html:

<link href="newindexmain.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="bigcontainerforshadow">

<div id="top"><strong>Search:  </strong><a href="../search/search.html">This Site</a> |
           <a href="http://www.psu.edu/directory">People</a> |
            <a href="http://www.psu.edu/directory/dept/">Departments</a> |
            <a href="http://search.psu.edu">Penn State</a>	</div>
<div id="pagewidth" >
	
	<div id="header" ></div>
	<div id="bar">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="750" height="200" title="SHC Rotating Banner Images">
        <param name="movie" value="banner.swf">
        <param name="quality" value="high">
        <embed src="banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="200"></embed>
      </object>
	</div>
	<div id="bar2"> </div>
	
	<div id="rightcol" > 
			
		<ul id="vertnav">
	<li><a href="../index.cfm">Home</a>	</li>
	
	<li><a href="#">Prospective Students</a>
	      <ul>
            <li><a href="../prospectivestudents/programoverview/index.html">Program 
              Overview</a></li>
            <li><a href="../prospectivestudents/brochure.pdf">SHC Brochure</a></li>
            <li><a href="../prospectivestudents/programs/index.html">Programs 
              for Prospective Students</a></li>
            <li><a href="../prospectivestudents/process/index.html">First-year 
              Admissions Process</a></li>
            <li><a href="../prospectivestudents/application/index.html">Application</a></li>
            <li><a href="../prospectivestudents/accepted/congratulations.html">Accepted Students Only</a></li>
            <li><a href="../prospectivestudents/faq/index.html">FAQ</a></li>
            <li><a href="../prospectivestudents/profiles/index.html">Scholar Profiles</a></li>
            <li><a href="http://www.equity.psu.edu/mrc/">Multicultural Resource 
              Center</a></li>
          </ul>
	</li>
	
	<li><a href="#">Current Students</a>
	      <ul>
            <li><a href="../currentstudents/policies/index.html">Academic Information</a></li>
            <li><a href="http://forms.shc.psu.edu">Online Forms</a></li>
            <li><a href="../currentstudents/studentprogramming/international/index.html">International 
              Programs</a></li>
            <li><a href="../currentstudents/studentprogramming/index.html">Student 
              Programming</a></li>
            <li><a href="../prospectivestudents/profiles/index.html">Scholar Profiles</a></li>
			<li><a href="../currentstudents/resourcesforscholars/resources.html">Resources For Scholars</a></li>
            <li><a href="../currentstudents/professionaldevelopment/index.html">Professional 
              Development</a></li>
            <li><a href="../currentstudents/research/index.html">Research/Honors 
              Thesis</a></li>
            <li><a href="../currentstudents/scholarship/index.html">Scholarships</a></li>
            <li><a href="../currentstudents/IUG/index.html">IUG/IUMD Program</a></li>
          </ul>
	</li>
	<li><a href="#">About the SHC</a>
	      <ul>
            <li><a href="../about/vision/index.html">Vision and Mission Statement</a></li>
            <li><a href="../about/history/index.html">History</a></li>
			<li><a href="../luchinsky/index.html">Luchinsky Lectures</a></li>     
            <li><a href="../about/schreyers/index.html">The Schreyers</a></li>
            <li><a href="../about/medal/index.html">The Scholars Medal</a></li>
            <li><a href="../about/staff/index.html">SHC Staff</a></li>
            <li><a href="../about/annualreport0405.pdf">Annual Report</a></li>
            <li><a href="../about/2005strategicplan.pdf">Strategic Plan</a></li>
          </ul>
	</li>
	<li><a href="#">Alumni</a>
	      <ul>
		   <li><a href="../alumni/">News And Announcements</a></li>
			<li><a href="http://www.giveto.psu.edu/ContactUs/UnitSchreyer.html">Supporting SHC</a></li>
            <li><a href="../alumni/society/index.html">Scholar Alumni Society</a></li>
			<li><a href="../alumni/profiles/index.html">Class Notes</a></li>
            <li><a href="../alumni/update.html">Update Your Information</a></li>
            <li><a href="../alumni/volunteers/index.html">Scholar Volunteers</a></li>
            <li><a href="../currentstudents/studentprogramming/mentoring/alumnimentoring.html">Mentoring 
              Program</a></li>
            <li><a href="../alumni/walkofhonor.html">The Walk of Honor</a></li>
          </ul>
	</li>
	<li><a href="#">Faculty</a>
	      <ul>
            <li><a href="../currentstudents/policies/index.html">Academic Information</a></li>
            <li><a href="http://forms.shc.psu.edu">Online Form System</a></li>
			<li><a href="../faculty/index.html">Guidelines And Polices</a></li>
            <li><a href="../currentstudents/research/index.html">Research/Honors 
              Thesis</a></li>
          </ul>
	</li> 
	
		<li class="lilabel"><a href="#">Search</a>
		  <ul>
            <li><a href="../search/search.html">Schreyer Honors College</a></li>
            <li><a href="http://www.psu.edu/directory">People</a></li>
            <li><a href="http://www.psu.edu/directory/dept/">Departments</a></li>
            <li><a href="http://search.psu.edu">Penn State</a></li>
          </ul>
	</li> 
</ul>
    </div>


	<div id="maincol" > 
		 <h3>Welcome From Interim Dean Clay Calvert:</h3>
	  <p>Welcome
			    to the Schreyer Honors College Home Page. We invite you to explore
			    the activities, opportunities and student accomplishments that
			    are an everyday part of the SHC. The College is consistently
			    referred to as among the best of its kind in the nation and making
			    a difference is what this college is all about. Check out our
			    unique three-fold mission and view student profiles, our application,
			    calendar, the research website and more. If you would like any
			    other information, please <a href="contact.html">contact
			    us</a>.</p>
			  <p>&nbsp;</p>
			  <div id="news"><h3>News:</h3>
			  <p>Links to various articles here<br>
			  Links to various articles here</p>
			  </div>
  </div>
			
			<div id="footer" > <p>2006, The Schreyer Honors College, The Pennsylvania State University<br>
   Penn State: Making Life Better. <br>
   The Schreyer Honors College: Making a Difference. <br>
   <a href="../contact.html">Contact Us</a> | <a href="http://www.psu.edu/ur/legal.html">Privacy and Legal Statements</a> | <a href="http://www.psu.edu/ur/copyright.html">Copyright</a> | <a href="http://transcoder.usablenet.com:8080/tt/http://www.shc.psu.edu">Text Only Version</a> | <a href="../search/siteindex.html">SHC Site Index</a></p>
	</div>
</div>

</div>

</body>
</html>

css:

/* generated by csscreator.com */ 
html, body{
	margin:0;
	padding:0;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #000000;
} 
#pagewidth{
	width:750px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	border: thin solid #000000;
	background-color: #000066;
} 

#header{
	position:relative;
	height:74px;
	background-color:#000066;
	width:100%;
	background-image: url(shcbanneredited.jpg);
} 
#maincol{
	background-color: #FFFFFF;
	float: left;
	padding-right: 10px;
	padding-left: 15px;
	padding-top: 15px;
	width: 545px;
 }
#news { 
}
#footer{
	height:75px;
	clear:both;
	border-top: thin solid;
	width: 740px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	color: #FFFFFF;
 } 
 #rightcol {
	color: #FFFFFF;
	width: 165px;
	float: left;
	padding: 10px 5px 10px 10px;
 }
#rightcol a{
	color: #DED914;
}
#bar {
	background:#999999;
	text-align: right;
	height: 200px;
	width: 750px;
 }
#top {
	width:750px;
	text-align:right;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px
	font-family: Arial, Helvetica, sans-serif;
	color: #C0C0C0;
}
#top a {
	font-family: Arial, Helvetica, sans-serif;
	color: #C0C0C0;
	text-decoration: none;
}
#bar2 {
	background:#666666;
	height: 4px;
	width: 750px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-bottom-style: inset;
	border-top-color: #000000;
	border-bottom-color: #000000;
 }
#vertnav {list-style: none;}

#vertnav{
     padding:0;
     margin:0;
}
#vertnav ul {
     padding: 0;
     margin:0;
     list-style: none;
     width:12em;
     z-index:98;
     position:absolute;
}
#vertnav li {
	margin:0;
	position: relative;
	width: 12em;
	background-color:#000066;
	border:solid 1px #000066;
	border-bottom:none;
	display:block;
	height:1.5em;
	z-index: 99;
}
#vertnav ul li {white-space:nowrap;width:18em;}

#vertnav li:last-child{border-bottom:1px solid #000066;}

#vertnav a {
	display:block;
	padding: 0.1em;
	margin:0.2em 0 0.2em 1em;
	width:11.5em;
	height:15px;
	color: #FFFFFF;
	line-height:12px;
	text-decoration: none;
}
#vertnav a:hover, #vertnav li:hover{
	background-color:#000066;
	color: #FFFFFF;
}
#vertnav ul li:hover, #vertnav ul li a:hover{
	background-color:#FFFFFF;
	color: #000066;
}
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
     display:none;
     position:absolute;
     top:0;
     left:12em;
}
/* non-IE browsers see this */
#vertnav ul li>ul, #vertnav ul ul li>ul{
     margin-top:-1.4em;
}
#vertnav li:hover ul ul, #vertnav li:hover ul ul ul, #vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul{
     display:none;
}
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul, #vertnav ul ul ul li:hover ul, #vertnav ul ul ul ul li:hover ul{
     display:block;
}
li>ul {
     top: auto;
     left: auto;
}
/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */ 
[/code]

treypsu
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2006-06-02
Posts: 6
Points: 0

[Solved] Need to split 2nd column into 2 columns

got it on my own.. had to float the two sub-columns left and right!