CSS: dynamic width of elements

Question

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?

Aru · Accepted Answer · 2014-12-16 04:31:08Z

1

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;
}

answered Dec 16, 2014 at 4:31

Aru

1,8701 gold badge13 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kristian Rafteseth Over a year ago

wow man. magic. what is the stuff behind this, that makes it "auto width" ?

Aru Over a year ago

not a rocket science behind that.. the attr 'float:left' always force the element to stay on extreme left of the wall

Jamie Counsell · Accepted Answer · 2014-12-16 04:37:07Z

0

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.

answered Dec 16, 2014 at 4:37

Jamie Counsell

8,1626 gold badges55 silver badges86 bronze badges

Collectives™ on Stack Overflow

CSS: dynamic width of elements

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related