Simple CSS Help - CSS-Tricks

This topic is empty.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts

September 6, 2011 at 8:43 am #34228

exteam

Participant

I am very new to CSS/html,

I have 2 different type of inner pages in the following way.

For all pages top banner with logo and navigation menu not changed (static). Also the footer static.

Page content area for each page

Page1: topcontent, midcontent (leftcontent, rightimg)

Page2: midcontent (leftcontent, rightimg), bottomcontent.

Content area width is 900px,
topcontent should be auto height and the width should be 900px
leftcontent width will be 500px
rightimg width will be 400px
bottomcontent should be auto height and the width should be 900px

please guide me to write the best css for the above.

September 6, 2011 at 10:36 am #86493

Johnnyb

Member

Ditto what wolfcry said. But this is just CSS 101. Float the left content and right img areas and set overflow: hidden on their container. That’s pretty much it. The top content and bottom content will have auto height by default.

September 6, 2011 at 11:41 am #86500

exteam

Participant

Sorry,

Here it is so far I have managed to code..

div#MainBodyContainer

{

float:left;

width:924px;

height:auto;

padding:0 0 0 26px;

background:#fbf7c2;



}

div#ContentArea

{

float:left;

width:898px;

text-align:center;

padding:20px 0 0 0;



}



div#topcontent

{

float:left;

text-align:justify;



}



div#midcontent

{

float:left;

text-align:center;

width:898px;

height:auto;

position:relative;



}



div#leftcontent

{

float:left;

text-align:left;

width:400px;

position:absolute;

}

div#rightimg

{

float:right;

width:400px;

border:#969696 solid;



}



div#ContentArea ul {

text-align:left;

margin:0; padding:20px;

font-size:18px;

color:#363636;

}



div#ContentArea ul ul{

font-size:15.5px; color:#363636;



}

September 6, 2011 at 2:06 pm #86513

Johnnyb

Member

Yeah ideally post a link, but if not then at least the HTML. If there’s not a specific reason for applying absolute positioning to the leftcontent then I’d take that off, or replace it with position: relative.

September 7, 2011 at 5:16 am #86586

exteam

Participant

see next coment

September 7, 2011 at 5:17 am #86605

exteam

Participant

Thanks for all for your willingness to support!



Here is the HTML,





Heading




Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting,

remaining essentially unchanged. It was popularised in the 1960s with the

release of Letraset sheets containing Lorem Ipsum passages, and more recently

with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 








What's included in a Lorem Ipsum




Lorem




Lorem ipsum dolor sit amet


Curabitur faucibus posuere diam


, consectetur adipiscing elit.


nec malesuada odio semper vitae.


Thoroughly clean fronts of cupboards and drawers


nec malesuada odio semper vitae.


Cobweb removal


nec malesuada odio semper vitae.


CLorem ipsum dolor sit amet


Anec malesuada odio semper vitae.


Lorem ipsum dolor sit amet




Ipsum




<Lorem ipsum dolor sit amet


Curabitur faucibus posuere diam


, consectetur adipiscing elit.


nec malesuada odio semper vitae.


Thoroughly clean fronts of cupboards and drawers


nec malesuada odio semper vitae.


Cobweb removal


nec malesuada odio semper vitae.


CLorem ipsum dolor sit amet


Anec malesuada odio semper vitae.


Lorem ipsum dolor sit amet




odio semper




Cobweb removal


nec malesuada odio semper vitae.


CLorem ipsum dolor sit amet


Anec malesuada odio semper vitae.




dolor ultricies




<<Lorem ipsum dolor sit amet


Curabitur faucibus posuere diam


, consectetur adipiscing elit.


nec malesuada odio semper vitae.


Thoroughly clean fronts of cupboards and drawers


nec malesuada odio semper vitae.


Cobweb removal


nec malesuada odio semper vitae.


CLorem ipsum dolor sit amet


<















Prices for Lorem ipsum






 Small unit or apartment $200 


 Small house $220 


 Average sized house $220 


 Large house $400 


The above prices are estimates only




Additional Services Available:




Nullam eget metus eu magna viverra bibendum ac sed dui.


Curabitur tincidunt lacus libero, non dapibus massa.


Etiam vel arcu mauris, id luctus elit.


Curabitur tincidunt lacus libero, non dapibus massa.