css inline block with fixed width

Question

I'm trying to learn designing a website.

Is there any way I can set my whole page width to 1000px with the current responsive sticky footer I have?
If possible, on top of the condition mentioned above, I want the left and right div to be horizontally align and the div will become vertical align when the screen collapse.

Here is my html/css code:

JSFiddle

For question 1, yes. You already have a wrapper class, try setting the width there. Don't forget that you can center block level content (like a div) that has width applied to it by setting its left and right margins to auto. For question 2, the css property float is what you'll need. — jme11
– jme11, Commented Jun 17, 2014 at 9:26

Gabriele Petrioli · Accepted Answer · 2014-06-17 09:15:50Z

1

Add max-width:1000px; to the .wrapper class and make the .content class float:left

.wrapper {
    margin: 0;
    height: auto; 
    max-width:1000px; /*add this line*/
}

.content {
    background-color: slateblue;
    width: 500px;
    float:left; /*add this line*/
}

Demo at http://jsfiddle.net/Sp2ZW/

answered Jun 17, 2014 at 9:15

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

4 Comments

Andrew Over a year ago

thanks for the reply! I just have little questions, when I expand the result box, the footer background grey color expand with the box, how do I solve this? and is it possible to do it without float?

Gabriele Petrioli Over a year ago

@Andrew, you could make the body be max-width:1000px instead of the .wrapper. This way it will affect the .footer as well. For the float:left you can do it with display:inline-block but you must make sure that there is no whitespace between the two div elements. Demo at jsfiddle.net/Sp2ZW/2

Andrew Over a year ago

This is exactly what I wanted, thanks! I remember reading somewhere that a link break or <br> will cost a whitespace...although Im not sure about that

Gabriele Petrioli Over a year ago

yes, line breaks in the source code are white space (and because you set the two divs as display:inline-block the whitespace between them gets rendered as any other whitespace..

Niek Vandael · Accepted Answer · 2014-06-17 09:16:46Z

0

you mean something like this?:

http://jsfiddle.net/S3hMH/1/

html, body {
    margin: 0 auto;
    display: table;
    height: 100%;
    width: 100%;
    width: 1000px;
}

.content {
    background-color: slateblue;
    width: 500px;
display: inline-block;
    float:left;
}

answered Jun 17, 2014 at 9:16

Niek Vandael

3941 gold badge3 silver badges15 bronze badges

Comments

Sudheer · Accepted Answer · 2014-06-17 09:40:24Z

0

Fiddle

If you are relatively new to responsive design i suggest using a framework as

Foundation bootstrap

Coming to your questions.

Ya You can set your page-width to 1000px.
```
#wrapper{
margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}

.content{
width: 50%;
float:left;
} 
```
@media screen and (max-width: 480px) { .content{ width:100%; } }

Content will occupy 100% width and stacks horizontally if the screen resolution is less than 480px because of the query above.Using % width helps you when designing responsive web pages

edited Jun 17, 2014 at 9:40

answered Jun 17, 2014 at 9:28

Sudheer

2,9762 gold badges24 silver badges36 bronze badges

2 Comments

Andrew Over a year ago

Sorry Gaby got it first.... I have thought about using a framework which I did before using html5up, but I totally don't know where to start re-designing.So, I ended up starting my own idea...

Sudheer Over a year ago

@Andrew If you are building responsive web page go with media queries

Collectives™ on Stack Overflow

css inline block with fixed width

JSFiddle

3 Answers 3

4 Comments

Comments

Fiddle

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related