So I have html like this
<div class="search-form-wrapper">
</div>
<div class="results-view-wrapper">
</div>
<div class="quick-visualization-wrapper"/>
This is the CSS for them -
.search-form-wrapper {
border-right: solid 1px #d1d2d4;
display: inline-block;
float: left;
height: 100%;
max-width: 350px;
min-height: 900px;
min-width: 300px;
position: relative;
width: 30%;
}
.results-view-wrapper {
display: inline-block;
height: 100%;
position: absolute;
padding-left: 10px;
}
.quick-visualization-wrapper {
display: inline-block;
}
The first two divs are displayed next to each other, but the last div appears behind the results-view-wrapper, (so next to the search-form-wrapper). I thought it might be because results-view-wrapper is position absolute, but when I took that out the div just moved downwards and was still behind results-view-wrapper.
How do I make it so that it appears next to the results-view wrapper?
You are not specifying the width of the second and third divs. You need to do it.
Why you have position:absolute on that div ? Also, don't use float on an element with display:inline-block.
http://plnkr.co/edit/6wLokBiZUw33SKmZtjiC?p=preview
Give this css a try. It has to do with your float and absolute position. Also the last div didn't have a width, so it was easily visible.
.search-form-wrapper {
border-right: solid 1px #d1d2d4;
display: inline-block;
height: 100%;
max-width: 350px;
min-height: 900px;
min-width: 300px;
position: relative;
width: 30%;
background-color:red;
}
.results-view-wrapper {
display: inline-block;
min-height: 900px;
height: 100%;
padding-left: 10px;
background-color:green;
}
.quick-visualization-wrapper {
display: inline-block;
background-color:black;
min-height: 900px;
height: 100%;
width:10px;
}
Related
I have two boxes inside my <header>-tag, which has a total width of 100%. When i align them up they fit perfect, but when i'm shrinking the window the right box jumps down beneath the left one. Here's the code:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
background-image: url('img/header.jpg');
height: 120px;
margin-right: 10px;
width: 65%;
}
#userinfo {
float: left;
height: 100px;
width: 33.2%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
</section>
<section id="userinfo">
test
</section>
</header>
Any quick fixes? Imagining this happens with the rest of my design as I'm moving forward. Thanks in advance.
The problem here is you are using some values for padding and margin on your elements and those by default are added to the actual size of the element, since both elements are 98.2% of the container +20 of the values at some point they don't fit into the 100% and will break.
To solve it you can use box-sizing property which will make the padding and border values be inside the total declared size, and since that doesn't work with margin you will need an extra container to use padding and create the separation:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
box-sizing:border-box;
padding-right: 10px;
width: 65%;
}
#head > div {
background-image: url('http://placehold.it/500');
height: 120px;
}
#userinfo {
box-sizing:border-box;
float: left;
height: 100px;
width: 35%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
<div></div>
</section>
<section id="userinfo">
test
</section>
</header>
Thanks DaniP, that solved it. But what about the content and sidebars part then?:
#container {
margin: 30px auto;
width: 70%;
min-height: 400px;
}
#leftmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
#content {
float: left;
box-sizing: border-box;
width: 60%;
background-color: #202020;
min-height: 600px;
}
#content > div {
background-color: #202020;
min-height: 600px;
}
#rightmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
I have a centered div whose height depends on the user screen resolution ( div1 ). I would like to automatically position a second div ( div2 ) exactly under it ( again in the center ), preferably without the use of either calculations/javascript or the use of a wrapping table
<div id="div1" class="div1"></div>
<div id="div2" class="div2"><input type=image src=bla.jpg></div>
css:
.div1 {
position: absolute;
overflow: hidden;
top: 10px;
left: 0px;
right: 0px;
width: 50%;
height: 65%;
min-width: 100px;
min-height: 200px;
max-width: 200px;
max-height: 300px;
background-color: red;
border: 1px solid #000000;
margin: 0 auto;
}
.div2 {
position: relative;
display: table;
overflow: hidden;
top: 200px;
border: 1px solid #000000;
padding: 0px;
margin: 0 auto;
background-color: yellow;
visibility: visible;
}
not working jsfiddle : http://jsfiddle.net/Y4kga/
the yellow div should be exactly ( touching ) under the red div
p.s. i'm using display: table because i have insite input type=image and i want the width the be as big as the input type.
How should i do this ?
thanks in advance!
Remove the absolute positioning from your div1 and add it to a wrapper div. Then the browser's layout engine can take care of positioning the yellow div beneath your red div.
<div class="wrapper">
<div id="div1" class="div1"></div>
<div id="div2" class="div2">lol</div>
</div>
Since div1 is no longer absolutely positioned, you can horizontally center using auto-margins.
.div1 {
margin: 0px auto;
margin-top: 10px;
}
http://jsfiddle.net/Y4kga/3/
Well, don't position your first div has absolute --> http://jsfiddle.net/tPJNg/1/
.div1 {
overflow: hidden;
width: 50%;
height: 65%;
min-width: 100px;
min-height: 200px;
max-width: 200px;
max-height: 300px;
background-color: red;
border: 1px solid #000000;
margin: 10px auto;
clear:both;
}
.div2 {
clear:both;
display: table;
overflow: hidden;
border: 1px solid #000000;
padding: 0px;
margin: 0 auto;
background-color: yellow;
visibility: visible;
}
That's it.
I'm not sure I can explaint clearly what is the problem, so please be understanding.
I have this HTML code:
<div id="container">
<div id="navbar">
...
</div>
<div id="content">
...
</div>
</div>
Here is the CSS code:
#container {
display: block;
width: 640px;
height: 480px;
}
#navbar {
display: block;
position: fixed;
width: 640px;
height: 70px;
}
#content {
display: block;
marign: 70px 0 0 0;
width: 640px;
height: 410px;
overflow-y: auto;
}
It works fine on desktop and any Android-base browser, but in iPhone's Safari... When I zoom in on this page the content works fine, but the fixed element stay on position relative to screen. Every other element moving fine.
What is the problem? I don't have idea...
An element with fixed position is positioned relative to the browser window.
You should give top: 0; and/or left:0 etc
try on this code http://jsfiddle.net/nandhakumarsri9/bkwLG/
#container {
display: block;
width: 640px;
height: 480px;
border: 1px solid #000;
box-sizing: border-box;
position: relative;
}
#navbar {
display: block;
position: absolute;
width: 640px;
height: 70px;
border: 1px solid #F00;
box-sizing: border-box;
}
#content {
display: block;
width: 640px;
height: 410px;
overflow-y: auto;
border: 1px solid #00F;
box-sizing: border-box;
position: absolute;
top: 70px;
}
Most of mobile browsers have problem with fixed positioning. Try to use jQuery mobile framework with data-position="fixed" attribute.
I use this template
<style>
#block_center{
position: absolute;
right: 210px;
left: 210px;
text-align: left;
border: 1px solid #000;
overflow: auto;
height: auto;
}
#block_right{
width: 200px;
border: 1px solid #000;
position: relative;
right: 3px;
text-align: left;
float: right;
}
#block_left{
position: relative;
left: 3px;
width: 200px;
border: 1px solid #000;
text-align: left;
float: left;
}
#block_content{
clear: both;
float: none;
width: 100%;
text-align: center;
overflow-y:auto;
overflow-x:auto;
height: auto;
/* margin-bottom: -50px; */
margin: auto;
}
#block_buttom {
background-color: blue;
/* z-index: -10; */
width: 100%;
height: 50px;
clear: both;
}
.clear {
clear:both;
overflow:hidden;
}
</style>
<div id="block_content">
<div id="block_center"> ARTICLE <br> article_ajax_content </div>
<div id="block_right"> Artile links </div>
<div id="block_left"> banner </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="block_buttom"> some text info about site and 31px height img </div>
Problem that I having is that Article not only can be random height size but also there is ajax block of random size content going after it and I simply can't absolutely stick bottom div to stay in bottom after all content regarding browser window size, content size, ajax block size...
Can any one help me with how css (I do not want to use jQuery to pin bottom block to a fix y coordinate) should look like for my pattern of use?
Make all blocks relatively positioned and give the heights and widths using percentage rather than pixels.
Make sure the sum of all your height percentages is 100%(in case you want to cover the whole screen).
This ensures your page content covers the whole screen, irrespective of the screen resolution.
The relative sizes of each block is also kept the same across all resolutions.
The key is to use PERCENTAGE values and not PIXEL values.
To solve the Dynamic sized article data, just CSS the article div to have a scroll bar.
this is currently does want i want
<style>
#block_buttom {
margin-top: 10pt;
/* z-index: -10; */
width: 100%;
display: inline-block;
height: auto;
clear: both;
}
.page-buffer {
padding-top: 50px inherit;
height: 50px;
clear: both;
width: 100%;
}
.clear {
clear:both;
font-size:0;
overflow:hidden;
}
#block_content {
width:100%;
text-align:center;
}
#block_left {
position: relative;
top: 0px;
text-align: left;
float:left;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
#block_center {
text-align: left;
display: inline-block;
margin:0 auto;
width:70%;
min-width: 640px;
height: auto;
padding: 3px;
}
#block_right {
position: relative;
text-align: left;
float:right;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
</style>
on high resolution it looking very nice, on lower - still require some tuning with finding balance of center block size and spaces between fixed size left\right blocks
looked for other examples but couldn't find any. my image container uses max-width/max-height so the image scales to the container but I can't seem to get it to auto margin top/bottom or vertical align it to the middle without setting a height.
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
}
#container img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
vertical-align: middle;
}
<div id="container"><img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
http://jsfiddle.net/beftR/
I could only get it to work by adding another div named #container2 to your code. I used table/table-cell display type to do it. Here is what I did (jsFiddle here).
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
display:table;
}
#container2 {
display:table-cell;
vertical-align:middle;
}
#container img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="container2">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
</div>