Hvorfor hopper en <div> boks ind?

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
noergaard1
Begynder
Indlæg:14
Tilmeldt:21. apr 2014, 14:33
Hvorfor hopper en <div> boks ind?

Indlæg af noergaard1 » 30. apr 2014, 22:20

Hej igen igen...

Undskyld jeg skriver hele tiden, men her er endnu et problem..
Det kan ses her: http://norgaardan.dk/om%20os.html
Det er det med at sidebaren den hopper ned under, men den gør det ikke på selve forsiden, kun når jeg sletter noget af den content jeg har.

Kode: Vælg alt

Det er HTML fra Om os-siden
<div id="content"><!-- InstanceBeginEditable name="content" -->
                    		<h1>Welcome to Manchester</h1>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium nunc eget mi pellentesque vel adipiscing orci tempus. In dapibus porta feugiat. Vestibulum dignissim lorem tortor. Donec eleifend pharetra velit, ac euismod nunc porta ac. Aliquam est mauris, cursus sit amet facilisis nec, euismod in elit. Integer eu pharetra odio. Proin dictum urna non nibh adipiscing laoreet at a dolor. Quisque varius lacus vitae neque accumsan nec tempus quam ullamcorper.</p>
                         <h2>This a subheading on the page</h2>
                         <p>Phasellus pretium nunc eget mi pellentesque vel adipiscing orci tempus. In dapibus porta feugiat. Vestibulum dignissim lorem tortor. Donec eleifend pharetra velit, ac euismod nunc porta ac. Aliquam est mauris, cursus sit amet facilisis nec, euismod in elit. Integer eu pharetra odio. Proin dictum urna non nibh adipiscing laoreet at a dolor. Quisque varius lacus vitae neque accumsan nec tempus quam ullamcorper.</p>
                    <div id="rightside">
               		  <h2>Sidebar Heading</h2>
                         <p>Tesque habitant habitant habitant morbi tristique senectus morbi tristique senectus et netus et malesuada morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                         <img src="images/Gallery/Billed23.jpg">
                         <p>Senectus et netus habitant morbi tristique senectus et netus et malesuada et malesuada fames ac turpis egestas.</p>
                         <h2>Sidebar Heading</h2>
                         <ul>
                         		<li>California</li>
                             <li>Arizona</li>
                             <li>Nevada</li>
                             <li>Washington</li>
                             <li>Utah</li>
                         </ul>
                         <p>Tesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                    </div>
           	<!-- InstanceEndEditable -->
           </div>

Kode: Vælg alt

 Og det er den CSS som jeg har lavet dertil, som er ens på alle siderne
#rightside				{ float:right; width:270px; }
#rightside h2			{ color:#000; }
#rightside p			{ font-size:12px; line-height:180%; }
#rightside li			{ font-size:12px; line-height:180%; }

Kode: Vælg alt

 Og det er så forsiden + andre siders HTML

<div id="content-wrapper">
           	
                    <div id="content"><!-- TemplateBeginEditable name="content" -->
                    		<h1>Welcome to Manchester</h1>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium nunc eget mi pellentesque vel adipiscing orci tempus. In dapibus porta feugiat. Vestibulum dignissim lorem tortor. Donec eleifend pharetra velit, ac euismod nunc porta ac. Aliquam est mauris, cursus sit amet facilisis nec, euismod in elit. Integer eu pharetra odio. Proin dictum urna non nibh adipiscing laoreet at a dolor. Quisque varius lacus vitae neque accumsan nec tempus quam ullamcorper.</p>
                         <h2>This a subheading on the page</h2>
                         <p>Phasellus pretium nunc eget mi pellentesque vel adipiscing orci tempus. In dapibus porta feugiat. Vestibulum dignissim lorem tortor. Donec eleifend pharetra velit, ac euismod nunc porta ac. Aliquam est mauris, cursus sit amet facilisis nec, euismod in elit. Integer eu pharetra odio. Proin dictum urna non nibh adipiscing laoreet at a dolor. Quisque varius lacus vitae neque accumsan nec tempus quam ullamcorper.</p>
                        
                         <div id="box1">
                         		<img src="../images/Gallery/billed1.png">
                             <h2>Subheading Item</h2>
                             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                         </div>
                   		
                        	<div id="box2">
                         		<img src="../images/Gallery/billed1.png">
                             <h2>Subheading Item</h2>
                             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                         </div>
                         
                         <h2>Another subheading on the page</h2>
                         <img class="img-right" src="../images/wireframe.jpg">

                         <p>Phasellus pretium nunc eget mi pellentesque vel adipiscing orci tempus. In dapibus porta feugiat. Vestibulum dignissim lorem tortor. Donec eleifend pharetra velit, ac euismod nunc porta ac. Aliquam est mauris, cursus sit amet facilisis nec, euismod in elit. Integer eu pharetra odio. Proin dictum urna non nibh adipiscing laoreet at a dolor. Quisque varius lacus vitae neque accumsan nec tempus quam ullamcorper.</p> 
                         <p>Donec eleifend pharetra velit, ac euismod nunc porta ac. Aliquam est mauris, cursus sit amet facilisis nec, euismod in elit. Integer eu pharetra odio. Proin dictum urna non nibh adipiscing laoreet at a dolor. Quisque varius lacus vitae neque.</p>
                         <p>This is some final text on the page</p>
                    </div>
                    
                    <div id="rightside">
                    		<h2>Sidebar Heading</h2>
                         <p>Tesque habitant habitant habitant morbi tristique senectus morbi tristique senectus et netus et malesuada morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                         <img src="../images/Gallery/Billed23.jpg">
                         <p>Senectus et netus habitant morbi tristique senectus et netus et malesuada et malesuada fames ac turpis egestas.</p>
                         <h2>Sidebar Heading</h2>
                         <ul>
                         		<li>California</li>
                             <li>Arizona</li>
                             <li>Nevada</li>
                             <li>Washington</li>
                             <li>Utah</li>
                         </ul>
                         <p>Tesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                    </div>
           	<!-- TemplateEndEditable -->
           </div>
Håber i kan hjælpe, det er nok bare simpelt for jer, som har forstand på det :)
God aften til jer!

noergaard1
Begynder
Indlæg:14
Tilmeldt:21. apr 2014, 14:33

Re: Hvorfor hopper en <div> boks ind?

Indlæg af noergaard1 » 4. maj 2014, 19:52

Jeg fandt ud af en måske halv løsning, men hvis jeg valgte min sidebar til, at skulle være i en editableregion for sig selv, så virkede det fint :)

Besvar