I want to flow multiple divs (function_block) inside another div (WebPage_NavigationWrapper). I don't want to give WebPage_NavigationWrapper div fix height, neither increase its height to adjust the overflow of other divs (function_block) but scrollbar appears on WebPage_NavigationWrapper div.
http://jsfiddle.net/toxic_kz/oqowv1wb/
Now I know I can achieve this by using display: table-cell; but then I lose width of function_blocks in case it goes over flow.
.function_block{
display:table-cell;
width:120px;
height:60px;
margin-left:3px;
margin-top:3px;
background-color:blueviolet;
}
http://jsfiddle.net/toxic_kz/oqowv1wb/
Set fixed height of parent div then scroller will enable for div.
#WebPage_NavigationWrapper{
/*display: table;
table-layout: fixed;*/
width:100%;
height:50px;
padding:10px;
overflow: auto;
}
Please refer following link from fiddle.
`http://jsfiddle.net/toxic_kz/oqowv1wb/`
I found the answer; introduce another div with width in px inside the functionBlock div and give functionBlock div
<div class="function_block">
<div class="function_inner_block">
function_block
</div>
</div>
<div class="function_block">
<div class="function_inner_block">
function_block
</div>
</div>
<div class="function_block">
<div class="function_inner_block">
function_block
</div>
</div>
<div class="function_block">
<div class="function_inner_block">
function_block
</div>
</div>
and give functionBlock div display: table-cell;
.function_block{
display: table-cell;
/*float:left;*/
width:120px;
height:60px;
margin-left:3px;
margin-top:3px;
background-color:blueviolet;
}
.function_inner_block{
width:121px;
min-width:121px;
background-color:yellow;
}
now whoever put negative mark on my blog should either change to plus mark OR bring me another solution ....
Please use overflow:auto as overflow:scroll will maintain a scrollbar regardless of whether there's overflowing content or not but auto will only show this when it needs to.
So your code should look like this:
#WebPage_NavigationWrapper{
/*display: table;
table-layout: fixed;*/
width:100%;
height:auto;
padding:10px;
overflow-x: auto;
overflow-y: hidden;
}
JSFIDDLE
Related
I have some floated divs in a wrapper, they should be side buy side and a fixed width. However as together the child divs are wider than the parent div this has been set to overflow:hidden;
My problem is I have to set the width of the parent div to accommodate the combined width of the child divs otherwise they are pushed onto a new line by the lack of available width.
I would like to not have to set the width of the wrapper div if possible as the child divs will be added dynamically.
Css:
.shell{
width:900px;
}
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
width:1000px;
}
.cont{
width:500px;
float:left;
position: relative;
}
Html:
<div class="shell">
<div class="wrap">
<div class="cont">
</div>
<div class="cont">
</div>
</div>
</div>
Note: The relative:position; must be kept for other reasons.
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
min-width:1000px;
width:auto;
}
if you want to view them side by side , then you should consider using inline-block
that is why we use min-width , just to initiate a width
I want to center the #nav div on the page. Inside I want the other divs to stay on the same line together separated by my 10+10px margin as is so far. I don't want the inside divs to collapse on separate lines while shrinking the page too small..
http://jsfiddle.net/tH2cc/789/
<iframe width="100%" height="300" src="http://jsfiddle.net/tH2cc/789/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
http://jsfiddle.net/tH2cc/789/embedded/result/
Try this:
Take out float:left from the embedded divs
Add white-space:nowrap; display:inline-block; to your container div
Here's modified version: http://jsfiddle.net/9e4hX/
Just set the #nav div to have a fixed width (the total width of the contained elements) and set display to block. Then clear your floats after the elements to keep the #nav div surrounding them. Don't use table-cell as the display.
CSS
#nav { display: block; width: 416px; }
HTML
<div id="nav">
<div id="bark"></div>
<div id="profile"></div>
<div id="read"></div>
<div id="write"></div>
<div style="clear: both;"></div>
</div>
Try this
#nav{
padding:10px;
background-color:rgb(77,77,77);
display: inline-table;
vertical-align:middle;
width: 70%;
margin-left: 15%;
}
check this fiddle
change your container div to display: table not table-cell and add margin: auto
http://jsfiddle.net/3j5kc/
#nav{
padding:10px;
background-color:rgb(77,77,77);
display: table;
margin: auto;
vertical-align:middle;
}
I have 3 divs vertically. The first should have 100% width, the second should have an image with width 283px, and third div should have 100% width.
Does anyone know how to position the image div in the middle of two others divs 100%?
I've tried this, but dont works for me
<div class="content">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
.first{
width:100%;
float:left;
background:yellow;
}
.third{
width:100%
float:right;
background:pink;
}
.second{
width:283px;
overflow:hidden;
background:blue;
}enter code here
If your intention is to position the divs next to each other horizontally than you can't have any of them set to a width of 100% as the total of all elements next to each other can only total 100%.
If your website will be fixed width than your easiest solution would be to set the width of the left and right div in pixels to the (width of the site - 283) / 2. Then they would float next to each other. You could also do this with %.
However if your site is fluid width, then you would need to work out a percentage for all 3 divs i.e 33% each but this would mean the middle won't be exactly 283px.
The only way I can think to make this work exactly as you want would be to use Javascript to resize the elements after the page load which could then get the browser dimensions and work it all out.
Having read it a few times i think i get what you want to do.
You want he middle div to be centred between the two other divs.
you need to give the div a class something like this:
.middlediv
{
width: 283px;
margin-left: auto;
margin-right: auto;
}
which can also be written like this:
.middlediv
{
width: 283px;
margin: 0px auto;
}
Your question isn't clear, so I've done both possible interpretations: http://jsfiddle.net/EbBzY/
HTML
<h1>Option 1</h1>
<div class="main">
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</div>
<h1>Option 2</h1>
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
CSS
.main{
display:table;
width:100%;
margin-bottom:100px;
}
.main .content{
display:table-row;
}
.main .content div{
display:table-cell;
}
.first{
background:yellow;
}
.third{
background:pink;
}
.second{
background:blue;
width:283px;
margin:auto;
}
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
I have a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.
I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.
How should I fix this?
It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top
Another option (or as well as) is to set the line-height to the desired height rather than the height.
If you have no luck with these, I suggest you put your html and css up on jsfiddle.
Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.
CSS Code
#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}
HTML Code
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner" style=" margin:0;"></div>
</div>
Here's a working solution. http://jsfiddle.net/j3zjg/
<style>
#container{
width:500px;
height:300px;
border:1px solid red;
}
#container div{
width:30%;
float:left;
height:40px;
background:red;
margin-right:5px;
}
</style>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>