Why result is like this

HTML & CSS
#1

So i made little design for website and it is all good like this

pSKw0gu.png1920×975

but when i change size of window it turns to this

fjScWUx.png1920×978

CSS:
.content-back{
margin-top: 10px;
padding: 20px;
width: auto;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0px 5px 0 rgba(0, 0, 0, 0.19);
background-color: fff;
}

.split-left{
float:left;
width: 250px;
height: auto;
margin-right: 10px;
}
.split-middle{
float:left;
width: 630px;
height: auto;
margin-right: 10px;
}
.split-right{
float:left;
width: 300px;
height: auto;
}

HTML

#2

The change in layout is because you are making the elements fixed widths like 250px what you need to do is make the fixed widths percentages so, 25% for example, and they will shrink and grow in width in the same ratio as the page width changes.

#3

i know that, but i don’t want them to grow in width as the page width changes, i want that elements to be size i made them
but there is bug with these elements you can see in picture

when i change window width they shouldn’t change but for some reason right part goes a little bit down and i don’t want that

#4

They must change as you have specified a fixed width. If there aren’t enough pixels to display the content in the page width it must shift. Your content appears top add up to 1200px.

Where do you want that right hand box to be on a narrow screen? You need to look at your floats and margins.

Alternatively make your container fixed at x width and display scroll bars that way the container will always be the correct size and your site visitor may have to scroll left and right to view the content.

#5

i don’t get it
i made container 1200px
and i also made 3 splits with all together ain’t more than 1200px

.container{
width: 1200px;
min-width: 1200px;
margin: auto;
}

it works all good but when i make window smaller it is not like it drops down and goes fully to the left side, this would happen if there wouldn’t be enough space like you said but it’s just gives little space from top

#6

Put a 1px coloured border round each of your split divs then you will see why it is dropping down.

Post a url and I will take a look.

#7

http://cssdeck.com/labs/txateon6
in this editor i didnt see this problem

but for me:

1g5D6FV.png1920×981

and this is HOW IT LOOKS IF THERE IS NO ENOUGH SPACE

n93zWTm.png1920×978

#8

no idea how to fix it, i think it is some kinda bug

#9

I can’t see your page as it is still waiting approval.

There is some sort of element pushing it down, possibly padding or a margin so until I can see it I can’t give you anything else to try.

#10

https://jsfiddle.net/ufuak8tw/

but i don’t see that bug there

#11

oh you were right, my top-bar was pushing it down and i didn’t notice that, Thanks!

Sponsor our Newsletter | Privacy Policy | Terms of Service