Solved

CSS help with layout

Posted on 2015-01-27
2
80 Views
Last Modified: 2015-01-27
Hi,

I have a design (attached)

design
How can i achieve the effect shown in designs where by the panels bleed off to one side.
i.e. the dark grey carries on all the way to the right side of the page

Thanks
0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40572607
Here's one way to do it. Substitute your own images, decide how big to make them, choose your background colors.
<!DOCTYPE html>
<html>
    <head>
        <title>Resize Problem</title>
        <meta charset="UTF-8">
        <style>
		* {margin: 0 auto; padding:0}
		body {text-align: center}
		section {margin: 15px 0}
		section.right {background: linear-gradient(to left, #444 50%, transparent 50%)}
		section.left {background: linear-gradient(to left, transparent 50%, #fed 50%)}
		section article {max-width: 600px; display: table}
		section.right article {background-color: #444}
		section.left article {background-color: #fed}
		article div {float: left}
		article div img {float:left; width: 150px; height: 150px}
		article div span {display: table-cell; padding: 15px}
		section.right article div span {color: #fff}
		section.left article div span {color: #444}
		section.right div img {float: left}
		section.left div img {float: right}
        </style>
    </head>
    <body>
    <section class="right">
    	<article>
            <div><img src="img/IMG_2.JPG" alt="" />
            	<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> 
            </div> 
        </article>
    </section>
    <section class="left">
    	<article>
            <div> 
                <img src="img/IMG_2.JPG" alt="" />
            	<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
            </div> 
        </article>
    </section>
    
    </body>
</html>

Open in new window

0
 

Author Comment

by:coolispaul
ID: 40572622
cool thanks
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question