I cant find solution to my problem, so I am asking you for help... I have 1 div which is changing its height depending on browser window height. Inside of this div is 5 another divs 4 per line, when I resize window size to smaller size divs fall down on line 2, 3, etc. That´s good, but these divs arent in the middle of the main div which is resized and that is what I looking for... Thank you
HTML:
<div id="main">
<!--Div1-->
<div class="mosaic-block fade">
</div>
<!--Div2-->
<div class="mosaic-block fade">
</div>
<!--Div3-->
<div class="mosaic-block fade">
</div>
<!--Div4-->
<div class="mosaic-block fade">
</div>
<!--Div5-->
<div class="mosaic-block fade">
</div>
</div> <!--main-->
CSS:
div#main {
border: #CCCCCC thin solid;
max width: 840px;
height:600px;
min-width: 210px;
border: #CCCCCC thin solid;
margin:0 auto;
max-width: 840px;
}
.mosaic-block {
margin-bottom:50px;
position: relative;
float:left;
margin:4px;
top:50px;
overflow:hidden;
width:200px;
height:200px;
background:#111 url(../img/progress.gif) no-repeat center center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
Instead of float:left; for .mosaic-block, you might want to try display:inline-block; and adding text-align:center; to your main. It's a bit dirty, but it works !
PS. you might want to remove that max width: 840px; , I doubt it's a valid declaration !
Add in your CSS #Main
overflow:auto;
Related
I am working on responsive design. I have div (WebPage_NavigationWrapper) and inside I have floating-left divs (function_block). Now I want to scroll bar in case floating divs cannot adjust in single line; meaning main div height remain same. Due to responsive design I am not using PX so I believe I am not providing height of div, unless I am wrong!
<div id="WebPage_NavigationWrapper" class="TitleHeaderBar_Style_L2">
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
</div>
</div>
CSS
#WebPage_NavigationWrapper{
display: table;
table-layout: fixed;
width:100%;
padding:10px;
overflow-x: scroll;
}
.function_block{
float:left;
padding:2px;
width:120px;
height:60px;
}
.function_block:hover{
background-color:#CDE5F2;
}
.CreateNewEntry_Icon{
margin-left:10px;
width:85px;
line-height:5;
display:inline-block;
background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top center;
}
i think this will help you,
replace your code with following
#WebPage_NavigationWrapper{
width:400px;
height: 100px;
padding:10px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid black;
}
.function_block{
display: table-cell;
padding:2px;
width:120px;
height:60px;
}
Example: http://jsfiddle.net/5VCfm/2/embedded/result/
.container {
position: absolute;
border: 1px solid red;
max-width: 90%;
margin-bottom: 20px
}
.container + .container {
top: 260px;
}
.content-container {
border: 1px solid green;
max-height: 200px;
overflow: auto;
padding: 15px;
}
.content-wrap {
border: 1px solid navy;
}
.content {
border: 1px solid red;
padding: 10px;
}
html
<div class="container">
<div class="content-container">
<div class="content-wrap">
<div class="content">
<h2>No width</h2>
large content see http://jsfiddle.net/5VCfm/2/embedded/result/
</div>
</div>
</div>
</div>
<div class="container">
<div class="content-container">
<div class="content-wrap">
<div class="content" style="width:300px">
<h2>Width 300px</h2>
large content see http://jsfiddle.net/5VCfm/2/embedded/result/
</div>
</div>
</div>
</div>
If width of element inside container is specified, he takes off the edge of the parent creating a horizontal scrolling. What is most characteristic behaves in Mozilla and Chrome. But Opera and IE show all right.
How to solve the problem? Is a bug?
The parent container has a max-width:90%, means it will become smaller as much as it can but it will never surpass 90% of the viewport width.
When this 90% is smaller than 300px (child), the horizontal scroll bar is being created, this process is completely normal, you just have to realize that the child has a fixed width, it will not get smaller.
Use max-width:300px; on the .content, this will allow it to have a 300px width IF IT CAN, but when the parent (90%) is less, it will become tighter.
DEMO
I'm trying to put 2 divs in one row but when i manage to do that - main container's HEIGHT is not adjusted correctly:
<div class="container">
<div class="info">Text</div>
<div class="controls">
<button value="Accept">Accept</button>
<button value="Decline">Decline</button>
</div>
</div>
CSS:
.container{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border:1px solid #800000;
margin: 8px;
height:auto;
}
.info{
display: inline-block;
vertical-align: middle;
text-align: center;
}
.controls{
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 130px;
padding: 8px;
border-left: 1px solid #000;
background-color: #D4D0C8;
float: right;
}
button{
width:100%; // what ever you want it to be
}
jsfiddle
how do I fix the container height?
This is a common problem with float-based layouts: the container does not stretch to accomodate the height of its floated children. There are two simple solutions to this problem:
Adding a div to clear:both (as AliRiza recommends in another answer).
Adding overflow:auto to the container.
I would advocate for using the latter method because it does not involve adding an HTML element just for the sake of presentation. See more info on this here.
It can be implemented like this:
.container {
overflow:auto;
}
JS Fiddle Example
add <div style="clear:both;"></div> at the end of container div
<div class="container">
<div class="info">Text</div>
<div class="controls">
<button value="Accept">Accept</button>
<button value="Decline">Decline</button>
</div>
<div style="clear:both;"></div>
</div>
edited DEMO
css
<style>
div{
width:100px;
height:100px;
display:inline-block;
border:1px solid #ccc;
vertical-align:top;
}
</style>
html
<div>your div 1</div>
<div>Your div 2</div>
The vertical align is to keep it at the top if u add different amount of text and images as it goes down lol
I know this might look like an old question but Im trying to put 3 divs side by side but the middle div should stretch with the form resizing. I found this here and used their code but it doesnt work. The right div still gets pushed down bellow the div instead of being next to it.
Here is an example of what I have but like I said the right div gets pushed down bellow the div instead of being next to it.
Can someone please share their well earned knowledge!
HTML:
<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
CSS:
.mainDiv{ position: relative;}
.left{ position: absolute; left: 0; top: 0; width: 100px; }
.right{ position: absolute; right: 0; top: 0; width: 100px; }
.center { margin: 0 100px; }
JSFiddle
Updated Fiddle as per your new requirement :)
<div style="border:1px solid red; height:140px;">
<div style="width:100px; float:left; border:1px solid blue;">
left
</div>
<div style="width:100px; float:right; border:1px solid blue; ">
right
</div>
<div style="border:5px solid green; overflow:hidden;">
middle
</div>
check this example
I have two different divs, one that floats left and one that floats right. They are much smaller than the whole page (about 400x200 each) and so the two are far apart hugging the edges of the page. How can I get them next to each other in the center? I tried setting the margins to auto and about 20px, respectively, but it did not change anything..
This is a job for inline-block!
http://jsfiddle.net/hyw6P/
<div id="container">
<div id="left">Left!</div>
<div id="right">Right!</div>
</div>
#container{
text-align:center;
width:100%;
height:300px;
border:1px solid black
}
#left{
border:3px solid blue;
height:100px;
width:100px;
margin:auto;
display:inline-block;
}
#right{
border:3px solid red;
height:100px;
width:100px;
margin:auto;
display:inline-block;
}
Give them a parent div with "margin: 0 auto; width:1000px;"
<div style="margin:0 auto; width:1000px;">
<div style="float:left">Left</div>
<div style="float:right">Right</div>
</div>
Or if you want them right next to each other:
<div style="margin:0 auto;">
<div style="float:left">Left</div>
<div style="float:left">Right</div>
</div>
Add a wrapper div around them both. Set a width on the wrapper and set margin top and bottom to 0 and the left and right to auto. Then set the width of the two float divs to fit the wrapper e.g. 50% will make them the same width.
Try using a z-index and position absolutes, or relative
Heres a link to help ya out
<div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>
http://www.yourhtmlsource.com/stylesheets/csslayout.html
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/html/default.asp
You can accomplish this with a wrapper div and setting the child divs to display as inline-blocks.
CSS:
#a, #b{
border: 1px solid #999;
width: 100px;
display:inline-block;
}
#container {
text-align:center;
}
HTML:
<div id="container">
<div id="a">a</div>
<div id="b">b</div>
</div>
jsFiddle example.