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.
Related
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;
}
I'm trying to make the left column static and the contentwrapper responsive to browser resizing. I do not want to use floats because when I do not want it to shift the content down.
HTML
<div id="maincontainer">
<div id="leftcolumn">
</div>
<div id="contentwrapper">
</div>
</div>
As far as I have understood from your question I think you need something like this:
http://jsfiddle.net/v5FZv/1/
CSS
#maincontainer{
display:table;
width:100%;
}
#leftcolumn{
display:table-cell;
min-width:100px;
background-color:red;
}
#contentwrapper{
display:table-cell;
width:100%;
background-color:blue;
}
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/
I have some elements I want to display. But sadly it does not work the way I want it.
Here is how it works:
http://jsfiddle.net/lukasoppermann/H3Nmg/7/
I want it so that the red boxes fill the space between the green box and the left side.
It needs to be dynamic though. The width of the container might change and the order of the elements can be different.
I would of course prefer a css-only way, but js is fine too. Does anyone have any tips?
// EDIT
To clarify, the elements cannot be hard-coded or floated to the right, because the number of elements, the width of the wrapper and also the number of green elements can vary. The order of the elements can vary too. I basically need the elements to arrange themselves without any wholes automatically.
Thats what I want.
http://img526.imageshack.us/img526/613/boxsorting.jpg
Hi you can define three div as like this
css
.container{
float:left;
margin-left:10px;
}
.top{
width:100px;
height:100px;
background:red;
}
.middle{
width:100px;
height:100px;
background:darkred;
margin-top:5px;
}
.right{
width:100px;
height:200px;
background:lightgreen;
float:left;
margin-left:10px;
}
.bottom{
float:left;
width:100px;
height:100px;
background:green;
margin-left:10px;
}
HTML
<div class="container">
<div class="top"></div>
<div class="middle"></div>
</div>
<div class="right"></div>
<div class="bottom"></div>
Live demo here http://jsfiddle.net/rohitazad/wyvrt/1/
What about using float:right to row-two div. You might have to fix the padding to make the green closer to red if you want. demo here http://jsfiddle.net/H3Nmg/9/
Should it look like this http://jsfiddle.net/H3Nmg/14/
Minus the hard coded width.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/H3Nmg/20/
demo: http://jsfiddle.net/H3Nmg/20/embedded/result/
Note: try to reduce the window size or width of the container div you will see the case and case output will come.
Please see the image below. Assume that these are all divs with the given ids. Also, let's assume that they carry the same weight semantically so they should be at the same point in the html hierarchy:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
What is the proper CSS to position them correctly so as to appear as in the image below? The solution should flow properly as the browser is resized and preferably work on >=IE7.
Think of this as an action panel (#1) and 3 information displays (#2, #3, #4) so it is probably expected for 2,3,4 to expand in width to fill the browser window and flow below the action panel as the browser shrinks.
Use this
#id1, #id2, #id3, #id4{ float:left; }
#id1{ width:50%; height:300px; background-color:red; }
#id2{ width:50%; height:50px; background-color:blue; }
#id3{ width:25%; height:250px; background-color:green; }
#id4{ width:25%; height:250px; background-color:yellow; }
demo at http://jsfiddle.net/gaby/wsEt6/
I altered your ids as they are not allowed to be numeric.
http://www.w3.org/TR/html4/types.html#h-6.2
EDIT: I just read the bottom piece, so my example is fixed (width)...
An id can't be a number, but to keep your example I'll use the numbers spelled out.
CSS:
.container { overflow:hidden; /* Clear Floats */ width:400px; }
#one, #two, #three, #four { float:left; }
#one { width:200px; }
#two { width:200px; }
#three { width:100px; }
#four { width:100px; }
Example: http://jsfiddle.net/DOSBeats/CqSTY/
I would suggest to use container divs for those. Something like this:
<div id="one" class="left"></div>
<div class="right">
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>
Wrap #1, #2, #3, #4 in a container div, #0.5. Float the #1 div left and have a width of 50%. Wrap #1, #2, #3 in a container div named, #container - float that right with a width of 50%.
Do the same thing for the divs inside #container
check if this helps you out just remember to modify divs as you need it all in the div play with them according to the screen size you need :
http://jsfiddle.net/z747R/