CODEWITHSUNDEEP
htmlcss
Kristian Rafteseth
Kristian Rafteseth

Reputation: 2032

CSS: dynamic width of elements

If you check the site im currently working on:
http://4rate.org/

I want the squares to be evenly aligned to the users screen width, so everything will look "centered", with no extra space on either side. I could hardcode the widths to match perfectly with my own screen, but then everyone which dont have my screen, will not have it look perfect.

I discovered that for example if i browse this site on my sony z3 compact, there will be 3 squares per line, and a pretty big "extra space" on the right side of the screen.

Same thing would apply for different screen sizes with different users.

How would you go about solving this?

Upvotes: 0

Views: 42

Answers (2)

Jamie Counsell
Jamie Counsell

Reputation: 8143

You may want to look into using a Javascript framework to accomplish this, or by using CSS media queries. Even something like Bootstrap can accomplish this quite easily.

Upvotes: 0

Aru
Aru

Reputation: 1870

Try the below

Update the class .ratingdiv by updating float:left with display:inline-block and adding vertical-align:top to get this fixed..

CSS:

.ratingdiv {
    background-color: #f0e0d6;
    border: 1px solid #d9bfb7;
    display: inline-block;
    height: 280px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    vertical-align: top;
    width: 255px;
}

Upvotes: 1

Related Questions