I have two divs under one parent div, the parent div has 100% width:
<div id="parent">
<div class="left"></div>
<div class="right"></div>
</div>
The conditions are:
I want two divs on the same line.
The right div may or may not be present. When it is present, I want it to always be fixed on the right. However, the left div must be elastic - it's width depends on its content.
I have tried both float:left, and dispaly:inline-block but neither solution seems to work.
Any suggestion would be appreciated.
I'd go with #sandeep's display: table-cell answer if you don't care about IE7.
Otherwise, here's an alternative, with one downside: the "right" div has to come first in the HTML.
See: http://jsfiddle.net/thirtydot/qLTMf/
and exactly the same, but with the "right div" removed: http://jsfiddle.net/thirtydot/qLTMf/1/
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background: #888;
}
.left {
overflow: hidden;
height: 100px;
background: #ccc
}
<div id="parent">
<div class="right">right</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>
#Yijie; Check the link maybe that's you want http://jsfiddle.net/sandeep/NCkL4/7/
EDIT:
http://jsfiddle.net/sandeep/NCkL4/8/
OR SEE THE FOLLOWING SNIPPET
#parent{
overflow:hidden;
background:yellow;
position:relative;
display:table;
}
.left{
display:table-cell;
}
.right{
background:red;
width:50px;
height:100%;
display:table-cell;
}
body{
margin:0;
padding:0;
}
<div id="parent">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="right">fixed</div>
</div>
HTML:
<div id="parent">
<div class="right"></div>
<div class="left"></div>
</div>
(div.right needs to be before div.left in the HTML markup)
CSS:
.right {
float:right;
width:200px;
}
So left div style depends on the presence of right div. I can't think of a CSS selector allowing that kind of behavior yet.
Thus it seems to me that you'll need to programmatically add a class server side (or in JS) on parent div or left div to do that.
<div id="parent twocols">
<div class="left"></div>
<div class="right"></div>
</div>
or
<div id="parent">
<div class="left"></div>
</div>
So right style is always :
.right {
float: right;
width: 200px; /* or whatever value you need */
/* margin and padding at your discretion */
}
and left style is :
.parent.twocols .left {
margin-right: 200px; /* according to right div width + margin + padding*/
}
I've had success with using white-space: nowrap; on the outer container, display: inline-block; on the inner containers, and then (in my case since I wanted the second one to word-wrap) white-space: normal; on the inner ones.
I think this is you want:
<html>
<head>
<style type="text/css">
#parent
{width:100%;
height:100%;
border:1px solid red;
}
.left
{
float:left;
width:40%;
height:auto;
border:1px solid black;
}
.right
{
float:left;
width:59%;
height:auto;
border:1px solid black;
}
</style>
</head>
<body>
<div id="parent">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="right">This is the right side content</div>
</div>
</body>
</html>
Here is the demo:http://jsfiddle.net/anish/aFBmN/
Related
I have two divs side by side inside a wrapper div. In the left column, there is an image with a title above. In the right column, there is a number of links. The links div has some top padding to align text of first link with image in left column. But when screen size changes, the image title over the image inside left column breaks into two lines. When this happens the text on right div is not aligned with the image anymore. I'm lost here as I'm trying to solve this with css. Any ideas?
What I want is to align text in right div with image in left div no matter how many lines it takes to print the tile.
.wrapper
{
width: 90%;
margin: auto;
background: #fff;
display:flex;
}
.col1
{
width: 48%;
background: #ccc;
float: left;
overflow: hidden;
}
img.col1 {
width: 100%;
height: auto;
}
.col2
{
width: 49%;
margin-left: 1em;
background: #000;
float: right;
color:white;
}
.text
{
padding-top: 59px;
}
.yellow {
color: #ccc;
font-weight: 600;
clear:both;
font-family: arial;
}
<div class="main">
<div class="wrapper">
<div class="col1"><h4>Lorem ipsum dolor sit amet consect</h4><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg">
</div>
<div class="col2">
<div class="text">
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
Well if you cannot change the HTML structure one solution would be:
Add a <h4> with the same content to the col2 with the same content as the one from col1. I don;t know if that is feasible for you. Let me know and i can find another solution ( hopefully )
Also, do not use float just take advantage of flexbox
See below
.wrapper {
width: 90%;
margin: auto;
background: #fff;
display: flex;
}
.col1 {
background: #ccc;
overflow: hidden;
}
img.col1 {
width: 100%;
height: auto;
}
.col {
flex: 0 0 calc(50% - 0.5em);
}
.col2 {
background: #000;
color: white;
margin-left: 1em;
}
.col2 h4 {
visibility:hidden;
}
.text {
}
.yellow {
color: #ccc;
font-weight: 600;
clear: both;
font-family: arial;
}
<div class="main">
<div class="wrapper">
<div class="col1 col">
<h4>Lorem ipsum dolor sit amet consect</h4><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg">
</div>
<div class="col2 col">
<div class="text">
<h4>Lorem ipsum dolor sit amet consect</h4>
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
I'm in the process of developing a blog and am trying to achieve a hover effect that slides up to reveal the full post preview on hover. The attached image is probably better at conveying the desired effect. Basically, only the title of the post is shown, then on hover the title slides up, also revealing the rest of the preview.
The only way I've been able to come close so far is by using two seperate div's, one with just the title and the other with the full preview (title included). Then fade the title div out while sliding the other up. It looked okay but it's just not as smooth as I'd like it to be. I would much prefer everything to slide up.
If any CSS wizards can help me, I'd appreciate it. Also, CSS-only would be great, JS as a last resort.
Thanks,
Oli.
Here's a quick / dirty solution:
HTML:
<div class="container">
<div class="post">
<div class="title">Bla bla bla</div>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
CSS:
.container {
background-color: #00f;
width: 300px;
height: 300px;
position: relative;
}
.post {
cursor: pointer;
background-color: #fff;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}
.body {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
height: 0;
opacity: 0;
overflow: hidden;
}
.post:hover .body {
height: 200px;
opacity: 1;
}
DEMO: https://jsfiddle.net/y7rb77sk/
Of course you can add transitions to animate it and make it cooler
Here is a solution: http://jsfiddle.net/leojavier/gbuLykdj/4/
Incase of overflow, this solution will give you a scroll: http://jsfiddle.net/leojavier/gbuLykdj/5/
<div class="container">
<img src="http://placecorgi.com/300/400" alt="">
<article>
<h1>My Title</h1>
<p>san leo vestibulum non. Donec porttitor semper malesuada. Morbi vel felis venenatis, tempus mi in, ornare purus. Morbi hendrerit orci ipsum, a fringilla ante tristique in. Fusce sollicitudin venenatis neque eget ornare. Integer semper, ante ut vestibulum finibus, ipsum ex aliquam quam, qui</p>
</article>
</div>
CSS
.container{
position:relative;
width:300px;
height:400px;
}
article{
position:absolute;
width:100%;
max-width:280px;
height:auto;
background:rgba(255,255,255,0.8);
bottom:0;
padding:10px;
font-family:arial;
opacity:0;
transition: opacity 1s;
}
.container:hover > article {
opacity:1;
}
I'm having trouble getting the following three-column layout to work:
A B C
+-------+-----------+-------------------------+
| | | |
| Fixed | Fixed | Expands to fill width |
| | | |
+-------+-----------+-------------------------+
Where:
A is fixed width.
B is a fixed width.
C contains content which I'd like to fill up the remaining space on the page. The page itself which has a resizable width
I've found numerous solutions where the center column is fluid, but I'm having trouble getting the right column to be the fluid width with the left and middle column having fixed width without having the right column line break when it expands larger. The content in the right column is mostly text while the left and middle columns are images.
Here's a fiddle I've been using for testing which has everything setup: http://jsfiddle.net/7y7Lmvr9/2/
You can ditch the floats and use display:table-cell instead:
$('#div_right').click(function () {
$(this).append('-------');
});
#div_left {
display:table-cell;
border:1px solid #F00;
width: 100px;
}
#div_middle {
display:table-cell;
border:1px solid #0F0;
width: 100px;
}
#div_right {
display:table-cell;
border:1px solid #00F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='div_left'>Fixed width</div>
<div id='div_middle'>Fixed Width</div>
<div id='div_right'>Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
display:table has been said, so i ll only say flex:)
body {
display:flex;
}
body>div {
border:solid;
width:100px;
}
#div_right {
flex:1;
width:auto;
}
<div id='div_left'>
Fixed width
</div>
<div id='div_middle'>
Fixed Width
</div>
<div id='div_right'>
Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
CSS calc() could be one of the solutions.
Demo - http://jsfiddle.net/7y7Lmvr9/3/
#div_left, #div_middle, #div_right {
border: 1px solid red;
box-sizing: border-box;
float:left;
}
#div_left, #div_middle {
width: 100px;
}
#div_right {
width: calc(100% - 200px);
}
Bowser compatibility - http://caniuse.com/#feat=calc
I recommend wrapping the three divs in another div, and setting the wrapper display to "flex." That way you can set the first two divs' width, and set the third to fill the remaining space.
http://jsfiddle.net/6LgkjpwL/
fiddle with flex implemented on wrapper.
A great resource on flex--
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body{
font-weight:bold;
}
#wrapper{
display:flex;
flex-direction: row;
}
#div_left{
order: 1;
overflow: hidden;
border:1px solid #F00;
width: 100px
}
#div_middle {
order: 2;
overflow: hidden;
border:1px solid #0F0;
width: 100px
}
#div_right {
order:3;
flex:1;
border:1px solid #00F;
}
<div style="width:100%; overflow:hidden">
<div id='div_left'>
Fixed width
</div>
<div id='div_middle'>
Fixed Width
</div>
<div id='div_right'>
Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
body{
font-weight:bold;
}
#div_left{
float:left;
overflow: hidden;
border:1px solid #F00;
width: 9%
}
#div_middle {
float:left;
overflow: hidden;
border:1px solid #0F0;
width: 9%
}
#div_right {
float:left;
border:1px solid #00F;
width: 79%
}
I have the page as the showed picture
When something is clicked on the right column, the DIV on the left column will appear with generated content. This Div has a fixed height but its position may vary depending on the clicked position on the right column. As you can see when the Div appears, the footer is not pushed down.
I have tried many solutions on SO to re-position the footer as in How to keep footer at the bottom even with dynamic height website
but none of them works for me. Maybe I have done something wrong?
My footer's css:
#footer{ color: #666666; background: #D3D3D3; border-top: 1px solid #AAA;
padding: 1em; margin-top: 0; position:absolute; width:100%; }
DEMO : http://jsfiddle.net/WTUPn/
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="push"></div>
</div>
<div id="footer">
</div>
<style type="text/css">
body, html { height: 100%; }
#wrapper {
min-height: 100%;
margin-bottom: -90px;
position: relative;
}
#footer, .push { height: 90px; }
#footer {
background: #000; color: #FFF;
}
</style>
apparently you'll need to insert more code but your footer cannot be positioned absolutely as it takes a specific position irrespective of other divs
I am working on a layout where there are 2 columns. What I am trying to achieve is this:
left column fixed, right column fluid but with the right column first in the html.
So far I have this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2 cols: left fixed right fluid with right first in html</title>
<style type="text/css">
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
margin:0 20px;
padding 0;
}
.main {
position: relative;
background-color:red;
float:left;
width:auto;
margin-left:240px;
display:inline;
}
.main aside {
float:left;
width:240px;
padding-right: 60px;
margin-left:-240px;
position:relative;
text-align: right;
background-color: aqua;
}
.right {
float:left;
width:100%;
margin-right:-2140%;
}
</style>
</head>
<body>
<div class="main">
<section class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</aside>
</div>
</body>
</html>
which is working fine everywhere EXCEPT in IE9.
Any ideas how I can fix this for IE9 without using a conditional stylesheet for IE?
p.s. I'm only interested in IE9+
I feel a bit bad about having to use calc for this. Maybe i should be have a look at old projects ;) If someone know a more elegant way, please feel free to edit or post a new answer.
Since you want the left columns to be fixed, i'd go for this:
http://jsfiddle.net/umv78/1/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left, .right {
border: 1px solid red;
}
.right {
float: right;
width: calc(100% - 200px);
}
.left {
width: 200px;
}
HTML:
<section class="right">I'am on the Right ...</section>
<aside class="left">Lorem ipsum dolor ...</aside>
try these styles:
.main:after {content:' '; display:block; height:0px; overflow:hidden; clear:both;}
.main {
background-color:red;
width:auto;
padding-left:300px;
}
.main aside {
float:left;
width:240px;
margin-left:-300px;
background-color: aqua;
}
.right {
float:right;
width:100%;
}
Example