I am attempting to write a userstyle to reformat another website (no chance to change html).
Currently the website has main content on left with a full height sidebar on RHS.
I have used CSS to remove much of the sidebar content and would now like the main content to expand to fill the width of the area below the sidebar.
If I had control of the HTML source I would place the sidebar first with 'float: right' in the style but I don't have control of the source and the sidebar div is after main content.
Traditionally this couldn't be done in CSS but can it be done now using CSS3? and if so how?
The pages I am actually attempting to style are TripAdvisor Forum pages such as this one but they are overly complicated to attempt use as an example so I have created this very simple web page to play with:
<!DOCTYPE html>
<html>
<head>
<style>
#mainbody {
border: 2px solid blue;
width: 600px;
}
#sidebar {
border: 2px solid green;
position: inherit;
float: right;
width: 250px;
}
#content {
position: inherit;
width: 550px;
}
</style>
</head>
<body>
<div id=mainbody>
<div id=content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa.</p>
</div>
<div id=sidebar>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. </p>
</div>
</div>
</body>
</html>}
With sidebar above content I get the desired format
Using jQuery you can do this:
$("#content").insertAfter("#sidebar");
http://jsbin.com/juvoc/1/edit
Related
Putting it simple.
Here is what I done:
https://codepen.io/matt1991/pen/abdeZNv
I've tried using flexbox to a extent, tried to mess with a lot of classes and properties, and yet can't do what I need, that is:
I need the div right-down to fill the space under the div right-up until both of them, together, have the same height of left, using only css, on a system built up on materialize.css. I know how to do that with javascript involved, but I want to make it using only css, in a way that, if left or right-up get more or less text, the size stays the same.
ps.: The red div MUST stop at the green one, it cannot go until the top and z-indexed behind the green one.
Any ideas?
If it's okay to remove the materialize.css it's easy:
<div id="main" class="container">
<div class="flex">
<div id="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci. Integer sodales viverra erat, quis tincidunt ante ornare sit amet. Donec sed urna urna. Cras in lectus in erat iaculis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum in lorem eget tristique. Nam at ex commodo, vestibulum nulla quis, convallis dolor. Etiam posuere augue massa. In pulvinar vitae dolor vel feugiat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci. Integer sodales viverra erat, quis tincidunt ante ornare sit amet. Donec sed urna urna. Cras in lectus in erat iaculis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum in lorem eget tristique. Nam at ex commodo, vestibulum nulla quis, convallis dolor. Etiam posuere augue massa. In pulvinar vitae dolor vel feugiat.
</div>
<div id="right">
<div id="right-up">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci.
</div>
<div id="right-down"></div>
</div>
</div>
</div>
body {
height: 100%
}
#main {
display: flex;
flex-flow: column;
height: 100%
}
.flex {
display: flex;
}
#left {
background-color: blue;
flex: 2;
}
#right {
display: flex;
flex-direction: column;
flex: 1;
}
#right-up {
background-color: green;
}
#right-down {
background-color: red;
flex: 1;
}
Okay I have 3 divs The outside div is a column. All 3 div heights are dynamically generated by its contents.
<div class="outer" style="display:flex; flex-direction:column; float:left;">
<div class="text 1" style="float:left; flex:1; background:red;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
<div class="text 2" style="float:left; flex:1; background:blue;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>
I have applied inline CSS for display Flex. Im working in Firefox, however I do have the cross browser CSS, but im just focused on getting it working here in Firefox and understanding this first.
The goal of what im trying to accomplish here is to make text 2 the exact same height as text 1.
Im new to this whole flex thing, im fairly certain im doing this completely wrong, ive been reading articles for a few hours and everything I try doesnt work. So im assuming im understanding this all wrong.
Im not sure if it matters, but this is being done within wordpress. Also everything is floating left
I apologize if this is trivial but im at a loss, and Stackoverflow never fails me. Any help would be greatly appreciated.
You are not far from what you wanted to do. Please notice that I removed the white spaces from your class names as white spaces are the separator for multiple classes. .1 and .2 are invalid class names.
You should use flex-direction: row; as you want the layout to be horizontally arranged. I used the flex shorthand property to reach the desired result, which stand for flex-grow, flex-shrink and flex-basis.
.outer
{
display: flex;
flex-wrap: row nowrap;
}
.text1, .text2
{
flex: 1 0;
}
.text1
{
background-color: gray;
}
.text2
{
background-color: darkgray;
}
<div class="outer">
<div class="text1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
<div class="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>
Also it is not necessary to use float on flex elements. But it should have no effect what so ever, as of the w3c:
float and clear do not create floating or clearance of flex item, and
do not take it out-of-flow.
I am making a list of blurbs with images that can be used anywhere throughout our site. I want it to be really flexible, not have a specified width, and work properly with no image and with different sizes of images. If the text for a block is longer than its image, I want the text not to wrap under the image.
I made a fiddle of pretty much exactly how I want it. https://jsfiddle.net/4dbgnqha/1/
Now the problem is, our senior developer told me I can't use overflow:hidden to clear the float or to prevent the wrap because:
"Overflow hidden spawns an object to wrap around the element you specified that on. By doing so it is able to constrain the perceived viewable area on that element. This invokes quarks mode in IE, which has a cascading effect for other elements on that page and how they will be interprited"
So whether or not I agree with that, I can't use it. I also can't use a clearfix hack because he said:
"clearfix dumps before:: and after:: elements into the DOM, we don’t want this sort of thing to be complicating layout, especially when we’re traversing through the DOM dealing with dynamically added elements and potential 3rd party code"
Now, I tried to find a way to build the layout without these hacks, but I haven't quite been able to get it with the constraints I want (no fixed width on the images, or the container).
Here's the sample CSS (with the "hacks"):
.item {
overflow: hidden;
margin-bottom: 20px;
}
.item img {
float:left;
margin-right: 10px;
}
.item p {
margin: 0;
overflow: hidden;
}
For this specific example you could use display: table-row / table-cell (unless your dev has a beef with this too)...
.item {
margin-bottom: 20px;
display: table;
}
.item img {
margin-right: 10px;
display: table-cell;
vertical-align: top;
}
.item p {
margin: 0;
display: table-cell;
vertical-align: top;
}
<div class="container">
<div class="item">
<img src="//placehold.it/100x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<img src="//placehold.it/150x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<img src="//placehold.it/100x200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<img src="//placehold.it/100x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
</div>
Fiddle version
Browser support is pretty universal - CANIUSE
I would like to have a design based on the following HTML code:
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>Title</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
What I am searching to do is to have two columns (the "container" divs) and to have the "title" elements all of the same height. I do not want to have a fixed height (because I do not know how long it is the title), and I'd like not to use Javascript.
Is there any css trick or css selector that is like "all .title elements have the same auto height"?
Thank you.
Could you try the style below and let me know if that is what you are looking for?:
<style>
.container {
display: inline-block;
width: 200px; /* change as you see fit */
/*height: 100px; change as you see fit */
margin: 10px; /* change as you see fit */
}
.image>img{
width:50px !important; /* change as you see fit */
height:50px !important; /* change as you see fit */
}
div.title{
min-height:40px !important; /* change as you see fit */
margin:10px 0 !important; /* change as you see fit */
background:#EEE !important; /* change as you see fit */
padding: 10px !important; /* change as you see fit */
}
</style>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500"/></div>
<div class='title'>Title</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
Hope it helps.
Alright so my problem is that I can't get the center div to dynamically set its width based on browser width and still float in between the two divs.
<style type="text/css">
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;width:100%;float:left;}
#right{min-height:70px;width:60px;float:right;}
</style>
<div id="container">
<div id="left">text</div>
<div id="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.</div>
<div id="right">text</div>
</div>
You could try setting your CSS up like this:
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}
jsFiddle
You could set the width of the middle div using jQuery, as such:
$('#middle').width($('#container').width()-120);
Working Demo
Try this with some trivial javascript: http://jsfiddle.net/maniator/SjMqU/
var middle = document.getElementById('middle');
var win_width = document.body.offsetWidth;
middle.style.width = (win_width - 140) + 'px';
And this fiddle works on window resize: http://jsfiddle.net/maniator/SjMqU/4/
The best way to do it would be to put it into a table, but if you don't want that just make all the divs behave like table cells:
<style type="text/css">
div{display:table-cell;}
#container{width:100%;}
#left{min-width:60px;}
#middle{min-width:50%;}
#right{min-width:60px;}
</style>
.....
You could do something like this:
#container{width:100%;
}
#left, #middle, #right{min-height:70px;
display:inline-block;
vertical-align:top;
}
#left{width:19%;
background:red;
}
#middle{width:60%;
background:green;
}
#right{width:19%;
background:blue;
}
http://jsfiddle.net/jasongennaro/8BqP9/