[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

CSS help with layout

Posted on 2015-01-27
2
Medium Priority
?
86 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
2 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

607 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