How to style webpage with percentages


Tags: html,css

Problem :

Following is my page structure

<div class="webpage">
    <div class="image"><img...></div>
    <div class="text1"></div> <div class="text2"></div>
</div>

What I want is for my webpage to be centrally aligned. That is it should fill all the page in vertical position. But horizontally, it should cover the central 80%.

so I wrote

.webpage{
margin-left : 10%;
margin-right : 10%;
width : 80%;
}

Now, I want my image to cover the top 20% of the area, and for my text 1 and text2 to cover the rest of the bottom 80%, but they should be aligned next to each other. Not vertically, but horizontally. So horizontally I want 50% for text1, and 50 for text 2.

I am not sure how to style it with css.

Can someone please advice

Thanks



Solution :

Please check the fiddle - https://jsfiddle.net/afelixj/tjsoL8dm/

image is added as background.


    CSS Howto..

    How would you go about placing li in different divs?

    How to add a sub menu in css template for blog? [closed]

    How to make this loading overlay effect responsive?

    How to draw rotated element as backgorund in HTML

    CSS: how to make a horizontal images scroller with two images per column?

    How to reduce font size on a defined css style?

    How to set icon of an page using CSS

    CSS: How to clear a floating object only one level, not the all the way to the left?

    CSS Image size, how to fill, not stretch?

    How to keep floated element from affecting “text-align: center” text?

    When I say position:fixed, how do I tell mobile browsers I mean it?

    How to dynamically allocate block of text using css?

    How to stop Table within a Table inheriting style of first table?

    How to create a top-footer and footer using foundation, just like foundation website

    HTML+CSS : how to move not close divs to create a right column?

    How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

    How to make a child div to grow to full screen using CSS?

    How do I show a handle to indicate to the user that a panel is resizable?

    How can I count HTML elements on a printed page using CSS?

    How can I make it so that CSS uses a class only if another is not present on an element?

    how to make multiple inline dropdown lists cross platform compatible?

    How to replace HTML text with images using CSS content cross browser

    How can I apply an existing CSS class style to a dynamically created div?

    How do I center content and extend the background color to 100% of the page?

    How to get WordPress Twenty Ten theme sub-menus to expand to their contents (CSS)?

    How to get 3 div's side by side under an angle

    How can I make a smooth transition of my input's placeholder text?

    How to do line animation using CSS and SVG

    Show different text based on OS

    How can I cut too wide image in HTML?