How can i construct above arrangement without using js ?
Thanks in advance !
#div3 {
display: inline-block;
}
#div1 {
min-width: 150px;
float: left;
}
#div2 {
max-width: 100%;
float: left;
}
http://jsfiddle.net/XCDsu/4/ - how can i fit the second div to content ? The first one has to be 150px not percent
all of those techniques in the other answers have a common problem.
they are assuming that the width of the first column is 150px, but actually you need min-width to be 150px. so what happens when the first column need to grow?
take a look at my solution. pure CSS, without using calc (so its also supported in older browsers like IE8)
Working Fiddle
HTML: nothing new here..
<div id="Container">
<div id="Column1">content</div>
<div id="Column2">content of second div is very very large</div>
</div>
CSS:
#Container
{
width: 80%; /*Change to WTE you want*/
display: table;
border: 1px solid black;
margin: 0 auto;
}
#Container > div
{
display: table-cell;
}
#Column1
{
background-color: red;
min-width: 150px; /*From your CSS*/
}
#Column2
{
background-color: green;
}
You could use the holy grail technique:
http://alistapart.com/article/holygrail
#div3 {
display: block;
background: blue;
padding-left: 150px;
}
#div1 {
width: 150px;
float: left;
margin-left: -150px;
}
#div2 {
width: 100%;
float: left;
}
What this does is create a 150px wide padding on the left of #div3, but it pulls #div1 into it with the negative margin.
This way the "100%" that #div2 uses is actually (100% - 150px) of #div3
If the width of #div1 is fixed at 150px and #div3 is dynamic, then you can use :
#div2 {
width : calc(100% - 150px);
}
And if #div1 is also dynamic, then you need to use JS.
Related
I have an inline div abc and another inline div def. abc's width is 100px. How can I let def appear on the right while def's width is its parent's width minus 100px?
I cannot do width:100%; since def would appears next line.
https://jsfiddle.net/h7k87vwx/
<div class="abc">abc</div>
<div class="def">def</div>
<div class="ghi">ghi</div>
.abc {
display:inline-block;
background-color:lightblue;
width: 100px;
}
.def {
display:inline-block;
background-color: lightyellow;
width: 200px;
}
HTML
<div class="abc">abc</div><div class="def">def</div><div class="ghi">ghi</div>
CSS
.def {
display: inline-block;
background-color: lightyellow;
width: calc(100% - 100px);
}
DEMO: https://jsfiddle.net/h7k87vwx/6/
Divs are lined up together to eliminate rendered white space. For an explanation see my answer here:
inline-block boxes not fitting in their container
Here's an old trick that was commonly used in holy grail layout:
.abc {
float: left;
background-color:lightblue;
width: 100px;
}
.def {
padding-left: 100px; /* margin-left also applies */
background-color: lightyellow;
}
Check out the fiddle.
Inline-block elements will have an empty space between them, one way to address this is to give them a negative margin. That will make it not be placed below. Another detail would be to keep an empty space in between the different values and the operator with calc() otherwise it will not work :
https://jsfiddle.net/t0ecucgw/
.abc {
display: inline-block;
background-color: lightblue;
width: 100px;
}
.def {
display: inline-block;
background-color: blue;
width: calc(100% - 100px);
margin-left: -4px;
}
I think you want to do:
.def {
width: calc(100% - 100px)
}
.def {
float:right;
background-color: lightyellow;
width: 200px;
}
link
I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.
I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions.
Here is my code:
<div id="container">
<nav id="sidebar-left">Left</nav>
<section id="page">Center</section>
<div id="sidebar-right">Right</div>
</div>
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
#page{
min-width: 514px;
margin: 0 20px;
max-width: 626px;
float: left;
background: purple;
height: 300px;
}
And I also made a fiddle:
https://jsfiddle.net/1y59nuxz/
I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.
EDIT: I need this to be compatible with IE9+
Ok. You have several solutions to accomplish this task.
One solution is to change order of elements in your html (if possible):
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
For "#page" use next css code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
Example code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
You can also check the fiddle.
Another solution is to apply flexbox. It's an elegant and easy way.
I think this layout can be achieved using some table & table-cell css like so:
basically set the .container to display: table
then set all direct children of the .container to display: table-cell
now these children will shrink/grow accordingly to their parent, however some tweaks have to be made for the #page to stay put at 626px widh and shrink down accordingly
max-width/min-width combo won't work on the #page div, however we can specify a fixed width, according to the max-width desired, in this case 626px, so that this div won't go past 626px width, but will shrink down if the window is resized
finally since we're using display: table-cell on these children divs, any margin prop. will be ignored, however we can mimic a margin using some border-left & right props. OR add another div inside the #page div that will hold the content and have some margin applied to it and the background accordingly.
Check out the demos bellow:
fake margins to the #page here
OR another div that holds the content for #page here
I have modified your code on fiddle
or else check the code below.
Html
<div class="content">
<div class="content__left">left</div>
<div class="content__right">Right</div>
<div class="content__middle">Center</div>
</div>
CSS
html, body, .container {
width: 100%;
height:100%;
min-width:1024px;
max-width: 1440px;
}
.content__left {
width: 20%;
max-width:200px;
float: left;
background: red;
margin-right:20px;
height:300px;
}
.content__middle {
min-width: 514px;
background: purple;
overflow: auto;
height:300px;
}
.content__right {
width: 20%;
max-width:200px;
float: right;
background: blue;
margin-left:20px;
height:300px;
}
working on a few design changes for my website on tablets and trying to work on this idea.
So the basic structure is like so:
<div id='container'>
<div id='leftbox'>Content</div>
<div id='rightsidebar'>Sidebar</div>
</div>
What i want, is for the container to be 100% width, but keep a right hand sidebar at 260px but allow the leftbox div to always fill the width left.
I have made a fiddle to show. But heres the CSS from that fiddle first:
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
}
#leftbox {
width: 50%;
height: 500px;
background-color: #666;
float: left;
}
#rightsidebar {
width: 260px;
height: 500px;
background-color: #333;
float: right;
}
Heres the fiddle: http://jsfiddle.net/X2w3D/
In that example I have just set the width of the left div to 50% to give it a width. The aim is that if the user was to be on a web browser, and resize then there would be no gap between the leftdiv and the rightsidebar. So the rightsidebar is always the same width, but the leftdiv will always fill the rest of the div up in width.
Thanks, Craig.
You might be interested on calc
width: calc(100% - 260px);
Demo
Referrence
Have you considered using the flexbox model? It was designed to answer this kind of problem.
I updated your fiddle and added an example solution: http://jsfiddle.net/X2w3D/4/
I used display:flex; on the container, then added flex-grow:1; to the #leftbox
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
display:flex; // ADDED THIS
}
#leftbox {
flex-grow:1; // ADDED THIS
height: 500px;
background-color: #666;
float: left;
}
Edit: If you need retro-compatibility for the flexbox model, I cannot recommend the amazing flexbox.less enough. It has saved my life quite a few times.
I have 2 divs with position:absolute set, looking as such:
#nav {
position:absolute;
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%:
height: 100%;
}
The #content div often exceeds the pages size, requiring the user to scroll down.
But the #nav div stops at the bottom of the screen - it does not continue down the page as the user scrolls.
Is there any way to make both divs have equal height (without JQuery)?
You can do this with css tables. (but you'll have to remove position:absolute)
FIDDLE
Markup
<div id="css-table">
<div class="col narrow">some content</div>
<div class="col wide">content</div>
</div>
CSS
#css-table {
display: table;
height: 100%;
}
#css-table .col {
display: table-cell;
padding: 10px;
}
.narrow
{
background: lime;
}
.wide
{
background:aqua;
}
You could try a fixed positioning over the #nav.
So, instead of position: absolute;
try position: fixed only for the first div, i.e. #nav. This should make it always be on the screen no matter how much the user scrolls.
try these css
#nav {
position:absolute;
width: 300px;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
#content {
position: absolute;
width: 70%:
padding-bottom: 99999px;
margin-bottom: -99999px;
}
Since OP has not accepted any answer, m trying my luck.... :)I think the fault is in line width: 70%: for #content....there is : instead of ;...i tried your code here after replacing it in fiddle and looks fine to me :
Fiddle : http://jsfiddle.net/logintomyk/LDh5x/2/
HTML remaining the same, here is the CSS
#nav {
position:absolute;
border:1px solid #000; //to show the different divs
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%; //this was mistake point
height: 100%;
text-align:right; //to show the text
border:1px solid #CCC; //to show the different divs
}
I have 2 divs side by side. I don't know the height of them upfront, it changed according to the content. Is there a way to make sure they will always be the same height, even when one of them stretches, only with CSS?
I made a fiddle to show. I want the red and blue divs to be the same height...
http://jsfiddle.net/7RVh4/
this is the css:
#wrapper {
width: 300px;
}
#left {
width:50px;
background: blue;
float:left;
height: 100%; /* sadly, this doesn't work... */
}
#right {
width:250px;
background: red;
float:left;
}
You could try instead of using float, use display: table-cell. You might find some older browsers don't understand this rule however. See below:
#wrapper {
display: table; // See FelipeAls comment below
width: 300px;
}
#left {
display: table-cell;
width: 50px;
background: blue;
}
#right {
display: table-cell;
width: 250px;
background: red;
}
Antony answer works ok, but you need all the divs to have the same parent and to have a wrapper, I have a solution that use javascript but works with any kind of element, they just need to have the same selector.
function setEqualHeight(selector, triggerContinusly) {
var elements = $(selector)
elements.css("height", "auto")
var max = Number.NEGATIVE_INFINITY;
$.each(elements, function(index, item) {
if ($(item).height() > max) {
max = $(item).height()
}
})
$(selector).css("height", max + "px")
if (!!triggerContinusly) {
$(document).on("input", selector, function() {
setEqualHeight(selector, false)
})
$(window).resize(function() {
setEqualHeight(selector, false)
})
}
}
setEqualHeight(".sameh", true)
http://jsfiddle.net/83WbS/2/
I would recommend reading this article that explains how to do what you are trying to do. I would put a fiddle up that shows, but its pretty extensive and pure css. http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
There is a much simpler solution I want to point to. Using large padding-bottom: 500em and negative margin-bottom:-500em of the same amount on columns while the wrapper has simply overflow:hidden to cut the columns to the right size.
Found here:
HTML/CSS: Making two floating divs the same height
As indicated by Hexodus you can padding-bottom and margin-bottom, but a better solution would be to use flexbox or grid.
You can check this codepen if you want. I included a footer area because that is something I needed and it required a little bit more of hack.
.section {
width: 500px;
margin: auto;
overflow: hidden;
padding: 0;
}
div {
padding: 1rem;
}
.header {
background: lightblue;
}
.sidebar {
background: lightgreen;
width: calc(25% - 1rem);
}
.sidebar-left {
float: left;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.main {
background: pink;
width: calc(50% - 4rem);
float: left;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.sidebar-right {
float: right;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.footer {
background: black;
color: white;
float: left;
clear: both;
margin-top: 1rem;
width: calc(100% - 2rem);
}
<div class="section">
<div class="header">
This is the header
</div>
<div class="sidebar sidebar-left">
This sidebar could have a menu or something like that. It may not have the same length as the other
</div>
<div class="main">
This is the main area. It should have the same length as the sidebars
</div>
<div class="sidebar sidebar-right">
This is the other sidebar, it could have some ads
</div>
<div class="footer">
Footer area
</div>
</div>
You can do this without using tables, by using this CSS trick.
Example - http://jsfiddle.net/LMGsv/
HTML
<div id="wrapper">
<div id="columns">
<div id="left">text</div>
<div id="right">text<br/>another line<br /></div>
</div>
</div>
CSS
#wrapper {
float:left;
width: 300px;
}
#columns {
float:left;
width:300px;
background:blue;
}
#left {
float:left;
width:50px;
background: blue;
}
#right {
width:250px;
background: red;
float:left
}