Solved

CSS help with layout

Posted on 2015-01-27
2
74 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 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Radio button Onclick submit form with validation 5 27
Help with HTML 7 39
Bootstap Icons 3 22
Help cleaning out CSS 2 32
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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 style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now