SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making the left float expand as far as the right one

    Hello,

    Well, I think I'm going crazy now.
    This is how my layout is supposed to look like:
    Screen1

    Well, the problem is, that this works perfectly on 1280x1024, but if I resize it down to another resolution, the page looks like this:
    Screen2
    This just happens in Firefox and Opera (which does not prove how good IE is, but rather how bad my CSS is )

    It should look like this (pic from IE):
    Screen3

    Here is the markup for the middle-part of the page:
    HTML Code:
    <!-- The Content-Container -->
    	<div class="pageCont">
    		<!-- The orientation-bar -->
    		<div class="orientationBar">
    			<div class="orientationBarInner">
    				<span class="orientationBarText1">Sie befinden sich hier:</span>
    				<span class="orientationBarText2">Startseite</span> <span class="orientBarArrow">&raquo;</span> <span class="orientationBarText2">Oberstufenportal</span>
    			</div>
    		</div>
    		
    		<!-- The Content Part -->
    		<div class="contentPart">
    			<div class="contentPartInner">
    			
    				<!-- The left-part -->
    				<div class="leftPartCont">
    				
    					<!-- The welcome-logo -->
    					<div class="welcomeLogo">
    						<div class="welcomeLogoInner"></div>
    					</div>
    					
    					<!-- The hot-spots -->
    					<div class="hotSpots">
    						<div class="hotSpotsTopRight"></div>
    						
    						<div class="hotSpotsContainer">
    							<!-- The title -->
    							<div class="hotSpotsTitle">
    								<img src="images/hotspotstitle.gif" alt="" />
    							</div>
    						</div>
    					</div>
    				</div>
    				
    				<!-- The right part -->
    				<div class="rightPartCont">
    				
    					<!-- The welcome-bar -->
    					<div class="welcomeBar">
    						<div class="welcomeBarIcon">
    							Wilkommen in der virtuellen HTS! 
    							Hier finden sie alle Informationen über die Schule und ihre AGs, Projekte und Veranstaltungen.
    						</div>
    					</div>
    					
    					<!-- The right navigation -->
    					<div class="rightNavigation">
    						<div class="rightNavigationInner">
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">27.06.06 &nbsp;</span>
    									<span class="newsItemTitle">Die Geschichte der Kunst</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">27.06.06 &nbsp;</span>
    									<span class="newsItemTitle">Die Reise des Christoph Kolumbus</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">27.05.06 &nbsp;</span>
    									<span class="newsItemTitle">Die Kurstitel für das 2. Halbjahr</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">27.05.06 &nbsp;</span>
    									<span class="newsItemTitle">Projekt "Die Odyssee"</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">19.05.06 &nbsp;</span>
    									<span class="newsItemTitle">Projekt "Australia"</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">20.12.05 &nbsp;</span>
    									<span class="newsItemTitle">Marketing-Konzepte des WiPo-Leistungskurses</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">18.12.05 &nbsp;</span>
    									<span class="newsItemTitle">Bericht der Sextanerparty 2005</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">18.12.05 &nbsp;</span>
    									<span class="newsItemTitle">Die Nikolausaktion 2005</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">18.12.06 &nbsp;</span>
    									<span class="newsItemTitle">Neues Gruppenfoto der SV</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    								<div class="clearer"></div>
    							</div>
    							
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">18.12.05 &nbsp;</span>
    									<span class="newsItemTitle">Neue Zeiten der Hebräisch AG</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    							</div>
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">18.12.05 &nbsp;</span>
    									<span class="newsItemTitle">Neue Zeiten der Hebräisch AG</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    							</div>
    							<!-- News item -->
    							<div class="newsItem">
    								<div class="newsItemInner">
    									<span class="newsItemDate">18.12.05 &nbsp;</span>
    									<span class="newsItemTitle">Neue Zeiten der Hebräisch AG</span>
    								</div>
    								<div class="newsItemArrow">&raquo;</div>
    							</div>
    							<div class="clearer"></div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    And here the important CSS:
    HTML Code:
    .contentPart {
    	width: 100%;
    	background-color: #344360;
    }
    
    .contentPartInner {
    	width: 100%;
    }
    
    .leftPartCont {
    	width: 65%;
    	float: left;
    }
    
    .rightPartCont {
    	width: 35%;
    	float: right;
    	background-color: #FFFFFF;
    }
    
    .rightPartCont {
    	width: 35%;
    	float: right;
    	background-color: #FFFFFF;
    	/*
    	clear: both;
    	position: relative;
    	top: -451px;
    	*/
    }
    
    .welcomeBar {
    	width: 100%;
    	background-color: #7CB525;
    	height: 110px;
    	font-size: 0.6em;
    	color: #384F13;
    	background-image: url("images/welcomebarbottomleft.gif");
    	background-position: bottom left;
    	background-repeat: no-repeat;
    }
    
    .welcomeBarIcon {
    	height: 80px;
    	background-image: url("images/welcomebaricon.gif");
    	background-position: left;
    	background-repeat: no-repeat;
    	float: left;
    	padding: 15px;
    }
    
    /* Opera hack */
    @media all and (min-width: 550px){
    	.welcomeBar {
    		position: relative;
    		left: -1px;
    		border-right: 1px solid #7CB525;
    	}
    }
    
    
    .rightNavigation {
    	width: 100%;
    	background-color: #FFFFFF;
    }
    
    /* Opera hack */
    @media all and (min-width: 550px){
    	.rightNavigation {
    		position: relative;
    		left: -1px;
    	}
    }
    
    .rightNavigationInner {
    	padding: 15px;
    	font-size: 0.6em;
    }
    
    * html body div.welcomeBar {
    	position: relative;
    	padding: 15px;
    	padding-right: 5px;
    	padding-bottom: 20px;
    }
    
    * html body div.welcomeBarCont {
    	background-color: #7CB525;
    	width: 102%;
    }
    
    * html body div.welcomeLogo {
    	width: 100%;
    }
    
    /* IE-Hack: Too wide */
    * html body div.hotSpots {
    	width: 100%;
    }
    Well, I know it is alot and it looks like a mess, but I seriously need this finished till thursday and I already tried everything.
    I tried to put clearer-divs all over the place and it didn't work.

    If somebody really wants to help me and needs the files for this, I'm willing to send them viá PM to you.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, my solution to this problem is to add "display: table" to "contentPartInner":
    Code:
    .contentPartInner {
    	width: 100%;
    	display: table;
    }
    Damn, this is ridicolous. I read, that IE doesn't recognize this, but this is no problem I guess, because IE renders it correct already.
    And what about older versions of Opera and Mozilla? Does it work on them? And Safari? Not really sure about this.


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
  •