Ive had quite some problems with positioning elements with CSS related to people using differently sized screens. Whats a bulletproof way to position elements so that they keep their position on the screen no matter how big the viewport is?
We have got 2 simple examples here.
In demo 1, div will always stick to top left of the screen regardless of screen size/resolution.
DEMO 1
<div id="test">This div will always appear on top left by default regardless of screen size.</div>
#test{ width:150px; height:150px; background-color:#666; }
This one will always stick to right hand side with some margin
DEMO 2
<div id="test">This div will always appear on right hand with 100 margin.</div>
#test{float:right; margin-right:100px; width:150px; height:150px; background-color:#666; }
wraped div. For example:
html:
<div class="wraped">
<div class="someDiv">
Hi
</div>
<div class="someDiv">
Hi reloaded
</div>
</div>
css:
.wraped {
background:grey;
width:500px;
height:300px;
margin:auto
}
.someDiv {
width:230px;
text-align:center;
padding:10px;
background:#ccc;
outline:1px solid black;
float:left;
}
You can preview this in http://jsfiddle.net/wandarkaf/2VVcm/
Related
This might be really simple but I just cant wrap my head around it.
CSS
#nav_bar{
max-width:1000px;
height:41px;
margin: 0 auto;
background-color:yellow;
}
#left{
float:left;
min-width:200px;
height:41px;
background-color:red;
}
#right{
float:right;
min-width:500px;
height:41px;
background-color:black;
}
HTML
<div id="nav_bar">
<div id="left">
</div>
<div id="right">
</div>
</div>
I'll explain this in colors. Basically I want the red box to float left and the right box to float right inside the yellow box. HOWEVER when I make the browser window smaller everything collapses and the black box goes UNDER the red (outside the yellow). I know this sounds very basic but I don't want it too collapse, I would be happy if it could just stay intact without moving at all and the browser just scrolls horizontally like it normally would if the window becomes too small for the content.
Thanks :)
You need to give #nav_bar a minimum width large enough to accomodate the two child elements:
#nav_bar{
...
min-width: 700px;
}
DEMO
Just add width:1000px or how much you need it to be, on the container. In this case "nav_bar".
Link to JSFiddle
#nav_bar{
max-width:1000px;
width:1000px;
height:41px;
margin: 0 auto;
background-color:yellow;
}
I have two buttons in my header with variable X position, like this :
But if the user resize the browser window to a too small width, the "A" and "B" buttons comes upon the logo (Like in third exemple). How could I avoid that ?
P.S. Sorry if my english is not that good
You should insert the logo in a div and from the css made his position relative and float it to the left, then you should do the same with the buttons. I've made an example for you there, maybe you can also set a min-width
http://jsfiddle.net/n3gmsgto/
HTML:
<div id="headbar">
<div id="logo">Logo</div>
<div id="A">A</div>
<div id="B">B</div>
</div>
CSS:
#headbar{
background-color:#0099ff;
height:100px;
width:100%
}
#logo{
position:relative;
float:left;
width:70%;
//or maybe min-width:x%;
}
#A{
position:relative;
float:left;
width:15%;
}
#B{
position:relative;
float:left;
width:15%;
}
Is also possible to arrange them in different ways to obtain similar results.
I have some trouble with my website.
I have a contact from which is based on 4 divs posisioned like this:
div 1 is the place where you can fill out your information
div 2 is the textarea for your message and a send button
div 3 is contact information
and div 4 are social media icons.
this all works great. on mobile they're are scaled beneath eachother and it works like a charm.
But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:
so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.
but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:
is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:
here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/
#container{
height:200px;
width:400px;
background:#212121;
}
#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id3{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id4{
height:90px;
width:190px;
background:#fff;
float: left;
}
this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.
Hope anyone can help me out!
If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.
See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)
HTML :
<div id="container">
<div id="left_wrap">
<div id="id1">left above</div>
<div id="id2">left under</div>
</div>
<div id="right_wrap">
<div id="id3">right above</div>
<div id="id4">right under</div>
</div>
</div>
CSS (modified)
#left_wrap,#right_wrap{
width:50%;
max-width:380px;
min-width:190px;
float:left;
}
#container {
height:100%;
width:100%;
background:#212121;
}
#id1,#id2,#id3,#id4 {
height:90px;
width:190px;
background:#fff;
float: left;
}
Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.
Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.
#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}
#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}
#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}
So on my screen this works fine on all browsers, but when i try to view my site on laptop or a smaller screen #sidebar and #center move to the left. I assume it has something to do with #sidebar's margin-left but is there any other way to make sidebar and center go under the header and next to each other?
#header {
background-image:url(media/dddd.png);
margin-left:auto;
margin-right:auto;
width:1000px;
height:250px;
position:relative;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
margin-left:23.5%;
margin-right:auto;
position:static;
}
#center {
margin-left:auto;
margin-right:auto;
height:800px;
width:700px;
background-color:white;
float:left;
border:1px solid black
}
Since #sidebar has left-margin: 23.5%;, it moves to the left when you reduce the window because it will always be 23.5% of the window width. So if your window is 1000px wide, the #sidebar div's margin-left will be 235px, and this number decreases with the width of the window (making it look like the div is moving to the left).
The #center div moves down because the width of the window is less than the margin-left value + the width of #sidebar + the width of #center. When the window is too narrow, the divs rearrange to fit (like how text in a text box goes to a new line when it runs out of space).
If you want to keep your layout how it is when the window gets smaller, there are two easy things you can do:
Make all of your divs width a percentage: If your #sidebar has margin-left:25%; width:20%; and your #center div has width:50%, both of the divs (and the margin) will resize as the screen shrinks (this is one way Responsive Web Design works). Here is an example on jsFiddle.
Put everything in a container div: Since it sounds you want to have your header, sidebar, and content in one block, you could wrap all of these elements in a container div. You'll have to change your CSS a bit, but a basic implementation would look something like this:
CSS
#container {
width: 1000px;
margin-left:auto;
margin-right:auto;
}
#header {
background-color:red;
width:auto;
height:250px;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
}
#center {
height:800px;
width:auto;
background-color:green;
border:1px solid black
float:left;
}
HTML
<div id=#container">
<div id="#header">header content</div>
<div id="#sidebar">sidebar content</div>
<div id="#center">center content</div>
</div>
Here is a jsFiddle with this code.
Since the container div has a set width, you don't have to worry about the widths of the child elements.
so i think you want to get #sidebar and #center beside each other,centered and under #header or?
Would be nice if we can see your html markup but
just give every div position:relative and a float left.
then you give the #sidebar left:50%.
Then add the width of both divs /2 (#sidebar and #center). --> (sidebar.width + center.width) /2
Then you give the result #sidebar with a margin-left and a minus before. --> margin-left: -500px
I think the issue lies with your HTML.
Ensure that your sidebar <aside> and your content <article> are nested within the same <div> or <section>.
The terms I'm using are with HTML5 syntax. If you aren't using HTML5, replace all elements with <div>.
Example:
<header></header>
<div>
<section></section>
<aside></aside>
</div>
If both the <section> & <aside> have a width:% or px; & float:left; you should be fine.
I am trying to position elements centrally, and in other positions within a fixed, centered box which overlays (when the user scrolls, the overlay-box stays put) my whole mobile site.
I have attached an image diagram to demonstrate what i'm trying to achieve:
Extra details include:
The 'overlay' has a width & height dependent upon the width and height of the users mobile device. i.e, width:80%; height:60%;.
I would like for the image in the top right hand corner of the diagram to always be that way on my site (as far in that corner as possible).
Any help is greatly appreciated. Cheers.
Check out the code. This mostly requires the use of relative and absolute positioning. You can tweak a bit to meet your needs
HTML
<div class="body" style="position:relative">
<div class="box">
<div class="box1"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
</div>
</div>
CSS
.body{
width:400px;
height:250px;
background-color:#888;
}
.box{
width:80%;
height:150px;
border:1px solid #FFF;
position:relative;
margin:auto;
top:10%;
}
.child {
height:10px;
width:50px;
position:relative;
margin:auto;
background-color:red;
}
.box1{
width:10%;
height:10%;
border:1px solid #FFF;
position:absolute;
top:0;
right:0;
}
I have added the fiddle too. http://jsfiddle.net/nQvEW/176/