What's missing to make this fluid-fixed layout work?
HTML:
<div class="header">
<div class="title">Title</div>
<div class="options">Opt</div>
</div>
CSS:
.header{margin:0;padding:0;}
.title{margin-right:50px;}
.options{float:right;width:50px;position:relative;top:0;left:auto;}
DEMO: http://jsfiddle.net/7Sdq6/
The link below works but I can't figure out what is missing for the above example to work.
http://jsfiddle.net/andresilich/6vPqA/13/show/
EDIT: I can position .options absolutely but I have a dropdown within that and I do not want the dropdown's position to be positioned relatively to .options
Demo
just add
display:inline-block;
Instead of margin-right: 50px use width: calc(100% - 50px)
Demo
css
.header {
width:400px;
}
.title {
width: calc(100% - 50px); /* takes the width of the parent and we substract the width of the right floated div from it instead of using margin-right */
background: red;
display: inline-block;
}
.options {
float:right;
width:50px;
background: blue;
}
As I understand you need to achieve a fixed title with fluid options, so you need to use this CSS
CSS
.title {
margin:0 50px 0 0;
float:left;
width: 400px /*your width*/
}
.options {overflow:hidden}
I figured it out..
The fixed content needs to be before the fluid content in the HTML:
<div class="header">
<div class="options">Opt</div>
<div class="title">Title</div>
</div>
http://jsfiddle.net/7Sdq6/5/
Related
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
My goal is to put div with width=100vw, after that div there should be second div with width for example 300px (so that second div should be out of screen). I tried many things with float, display inline and so on, now I don't have any more ideas.
<div id="div1"></div>
<div id="div2"></div>
Here is fiddle with example code
https://jsfiddle.net/kg5ea4sc/5/
You can use white-space: nowrap on parent element and display: inline-block on two inner elements. Also maybe you want to add vertical-align: top so it will look like this Fiddle
.element {
white-space: nowrap;
}
#div1{
background: green;
display: inline-block;
width:100vw;
height: 80px;
}
#div2{
background: red;
display: inline-block;
width:300px;
height: 100px;
}
<div class="element">
<div id="div1"></div>
<div id="div2"></div>
</div>
https://jsfiddle.net/guanzo/kg5ea4sc/18/
The second div is outside of the screen. You'll have to manipulate either it's position or the overflow:hidden property on the container if you want to see it though.
HTML
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
#div1{
background: green;
width:100vw;
height: 80px;
}
#div2{
background: red;
width:300px;
height: 100px;
}
div{
display:inline-block;
}
#container{
width:100vw;
white-space:nowrap;
overflow:hidden;
}
Here is my fork of your fiddle: https://jsfiddle.net/nyzvbvo7/1/
You can scoll to the right to see the second div
What I changed:
I added
body {
width: calc(100vw + 300px);
margin: 0;
}
#div1, #div2 {
display: inline-block;
vertical-align: top;
}
So I made the body wide enough to hold both containers and set the container's display to inline-block. vertical-align: top; can be left out, the the containers will be algned at their baseline (which can vary depending on the content)
I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?
HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green;
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
Edit
Classically, this would look like this:
CSS:
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
#div3 {
float:right;
width:400px;
height:200px;
background-color: green;
}
HTML:
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
DEMO: http://jsfiddle.net/NicoO/5AJkn/
P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.
If your browser support calc, you coudl try:
#div2 { float:left; width:calc(100% - 800px); height:200px; }
Add the margins too, if any.
<style>
.box{display: table;width: 100%;}
#div1{width:400px; height:200px;background: #000;display: table-cell}
#div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
#div3{width:400px; height:200px;background: #000;display: table-cell}
</style>
<div class="box">
<div id="div1"></div>
<div id="div2">ds</div>
<div id="div3"></div>
</div>
It is the same questions that :
Positioning two divs, one with fixed width(left div) and other in percentage(right div)
Two divs side by side, one with google map and second with fixed width
This Codepen fix your problem
Apply position: relative for their parent (if it is not positioned already) and
apply the following to div2:
#div2{
position:absolute;
left:400px; /* width of div1 */
right:400px; /* width of div3 */
height:200px;
}
JSFiddle
You can use css3 calc() function if older browser support is not an issue.
#div2{
display:inline-block;
width: calc(100% - 800px); /*100% - width of div1 and div3 */
height:200px;
}
JSFiddle
I can't set a height (in %) to a div (class="item") whose parent (class="site-section") has a min-height: 100%.
This is my HTML:
<div class="spacer"></div>
<header class="site-header"></header>
<div class="spacer"></div>
<div class="spacer"></div>
<section class="site-section">
<div class="column">
<div>I would like to be able to set an later
change the height of this green item.
<div class="item">ITEM</div>
</div>
</section>
<div class="spacer"></div>
<div class="spacer"></div>
<footer class="site-footer"></footer>
<div class="spacer"></div>
This is my CSS:
html, body {
height:100%;
margin 0;
color:blue;
}
.spacer {
height:1%;
}
.site-header {
height:8%;
background-color:yellow;
}
.site-section {
min-height:78%;
background-color:#ffcccc;
color:#aaa;
}
.site-footer {
height:8%;
background-color:yellow;
}
.column {
width: 50%;
}
.item {
height: 40%;
background-color: #33cc33;}
Here is the DEMO.
Everything was working fine until I added DOCTYPE to my HTML. There was no need to set height (in %) for html, body and .site-section, so .item was having his height: 20%. Now, because of DOCTYPE I need to set height for html, body, and .site-section. The consequence is that .item does not react to height: 20% anymore.
Any idea how to solve this?
P.S. I've based my demo on Bart's demo in this question.
#CBroe is correct in that you can't really get a height percent unless the parent itself has a height (ex. height: 35px). I would recommend setting the height of the div, then your inside divs can be set to percentages.
But I played a tiny bit with your fiddle and didn't know if adding position: absolute to the your class item CSS is sort of what you're looking for? So your CSS would look something like this:
.item {
position: absolute;
height: 40%;
background-color: #33cc33;
}
Here is the demo modified to show the example.
NOTE: Even though the height is flexible, if you set the height to 100% it will go above the rest of the divs.
.item{
position:absolute;
height:40%;
background:#33cc33;
}
.items {
position:relative;
height:100%;
background:inherit;}
HTML
<div class="item">
<div class='items'>
ITEM Try
</div>
</div>
Try :)
I have 2 DIVs:
<div id="sidebar"></div>
<div id="content"></div>
How would i make the sidebar div stretch the same height as the content.
Thanks for any help.
UPDATE:
Here is my example code with other elements:
http://tinkerbin.com/tkp2FZLZ
it has a content DIV in the Middle and 4 divs that makes border which is a different color.
You can easily get your desired results through display:table-cell;
HTML
<div id="sidebar">sidebar</div>
<div id="content">content</div>
CSS
#sidebar {
display:table-cell;
width:100px;
background:red;
}
#content {
display:table-cell;
width:100px;
background:yellow;
height:200px;
}
i think you are looking like this ;-
http://tinkerbin.com/yqyX3mXg
try this
#sidebar { position: relative; }
#content { position: absolute; top: 0; bottom: 0; right: 0; }
<div id="sidebar">
<div id="content">
</div>
</div>
Use display: table-cell on both column.
That will (visually! and visually only. It's CSS) make them behave the same way as th/td cells. You can add table-layout: fixed; display: table on parent and some width on one or both columns to use the other table algorithm, the one that doesn't try to adapt to content but try to respect the widths YOU want.
HTML:
<div id="sidebar"></div>
<div id="content">typo in your code, an =" was removed</div>
CSS:
#sidebar, #content {
display: table-cell;
}
EDIT: compatible with IE8+
You'll have to use inline-block for IE6/IE7 ... that they don't understand (ha!). display: inline; zoom: 1 is the alternative for them, or you can also float these columns and use a technique named faux-column (tl;dr the background is on the parent and it's a visual fake, it appears to be on each column but it isn't)
EDIT2: vertical-align: top is also often required for such layout columns.
Set the same height for them, you could possibly even give them a float.
By the way you have a bug in your html, write it like so:
<div id="sidebar"></div>
<div id="content"></div>
And the css:
#sidebar{
width: 40px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid red;
}
#content{
width: 165px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid blue;
}
Example