CODEWITHSUNDEEP
htmlcss
notnull
notnull

Reputation: 2028

CSS one column layout of relative width

I'd need my website layout to behave like this:

If the content div is wider than 50em, apply rules width: 75%; max-width: 75em. Otherwise, max-width: 50em; min-width: 25em apply.

Primary reason for this setup are wide screen panels vs. laptops and mobiles. The content is always horizontally centered. If the div was always 75% wide, it would kill the layout on phones, and it would also make long, unreadable lines on wide screens.

Upvotes: 1

Views: 95

Answers (3)

CRABOLO
CRABOLO

Reputation: 8793

Use @media queries. They were made for things like this.

@media screen and (min-width: 50em) {
     #div { width: 75%; max-width: 75em; }
}

More info http://css-tricks.com/css-media-queries/

Upvotes: 1

maja
maja

Reputation: 18034

What you are looking for are media-queries:

@media (min-width: 50em)
{ 
   div
   {
       width: 75%;
       max-width: 75em;
   }
}

The css-rules inside this media-query are only applied, if the screen-width is bigger than 50em. You can use as many media-queries as you want in your css.

Here are some more informations about this topic: http://wiki.selfhtml.org/wiki/CSS/Media_Queries

Upvotes: 1

Yves Lange
Yves Lange

Reputation: 3974

Use the @media closure in your CSS ?

You may read this: http://help.campaignmonitor.com/topic.aspx?t=164

Upvotes: 0

Related Questions