SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning two sections side by side.

    For the past three hours been playing around with the CSS on my website. But, since I'm trying to make it more responsive, I've been having a problem. The sections aren't aligning with each other (Even under the "standard view"). I've worked around with the position, clear, float, display... etc (practically everything!) and nothing has seemed to work. Maybe, you guys can give it a crack and see what I've been doing wrong / I messed up completely!

    Kind regards!

    Here is the current CSS I have applied (without media types) and it's the closest to what I want done:

    Code:
    body {
    	font-family: Lucida Sans Unicode; 
    	font-size: .8em;
    	color: #262626;
    	line-height: 1.3em;
    	margin: 0 auto;
    	background: #D0C4AF;
    }
    
    #content {
    	margin: 0 auto;
    	width: 960px;
    	background-color: #F1F0EC;
    }
    
    #container {
    	padding-top: 5em;
    }
    
    article#content {
    	width: 960px;;
    	margin: 0;
    	padding: 0;
    	display: inline;
    }
    
    
    article#content section.x {
    	width: 60em;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    
    article#content section.y {
    	clear: right;
    	width: 20em;
    	margin-left: 8em;
    	float: left;
    }
    
    article#content section.z {
    	width: 40em;
    	margin-right: 5em;
    	float: left;
    }
    
    
    img.center {
    	margin-right: auto;
    	margin-left: auto;
    	padding: .7em;
    	padding-bottom: 2em;
    }

    And the HTML:


    Code:
    	<body>
    		<div id="content">
    			<div id="container">
    				<article id="content">
    					<h2>Some Title</h2>
    
    					<section class="x">
    						<img src="pic.jpg" class="center"/>
    						<img src="pic.jpg" class="center"/>
    						<img src="pic.jpg" class="center"/>
    						<img src="pic.jpg"  class="center"/>
    					</section>
    
    					<section class="y">
    						<h3>Left Section</h3>
    	
    					        <p>This part seems to work. It tends to be the right section which messes up the look of the webpage in the browser.</p>
    					</section>
    					
    					<section class="z">
    						<h3>Right Section</h3>
    
    						<p>I'm not sure why or how but it's this section which causes the problems. Whether I change the float/position/... it sometimes never catches a-hold of everything. I'm probably overlooking something simple. Props to who can ever help! Thanks! :)</p>
    					</section>
    				</article>
    			</div>
    		</div>
    	</body>

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I tried that and it worked alright. But I was hoping to keep them in sections for practical use. I'll continue to work on it!

    Thank you for your response EricWatson!

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Those are sections? If you simply want side by side then float left two divs.

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wanted to use the <section> tag haha
    Thank you for your suggestions though! Had a breakthrough with the design and decided on something new/better

    Time to get busy and work!


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
  •