I have a problem with taking a triangle on a bottom of div, as you can see in image below. This three div's are in flexbox.
HTML code:
<section class="main_content">
<div class="1st_class">
<div class="features">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="triangle"></div>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
If you want a flexible solution I would recommend using an SVG background image of a triangle and then stretching it across the bottom of the box.
I have created a jsFiddle to show what I mean.
.active:after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background-size: 100% 100%;
background-image: url(triangle.svg);
}
Related
I am experiencing a problem in CSS where my other divs overlap to the image above if I use percentages, for px I have no problem and the divs stay in place. I want the image to be in full-width size though as like a hero image and want it responsive in all screen sizes.
Screenshot of site
.img-slider{
position: relative;
width: 100%;
height: 300px;
margin-bottom: 90px;
background: #18191C;
}
.img-slider .slide{
z-index: 1;
position: absolute;
width: 100%;
clip-path: circle(0% at 0 50%);
}
.img-slider .slide.active{
clip-path: circle(150% at 0 50%);
transition: 1.3s;
transition-property: clip-path;
}
.img-slider .slide img{
z-index: 1;
width: 100%;
width: 100%;
border-radius: 5px;
}
<div class="img-slider">
<div class="slide active">
<img src="images/Thumb/img1.png" alt="">
<div class="info">
<h2>Native Fixtures</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="images/Thumb/img2.png" alt="">
<div class="info">
<h2>Slide 02</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="3.jpg" alt="">
<div class="info">
<h2>Slide 03</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="4.jpg" alt="">
<div class="info">
<h2>Slide 04</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="5.jpg" alt="">
<div class="info">
<h2>Slide 05</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
If you use flex box with the justify-content:space-around setting and flex-grow you can create the effect your looking for.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My page has a fixed header, and there are content below. I have a div element, inside which I would like to relatively position another div. So I'm using the following structure:
Header: Fixed position
Container div: relative position
Div inside div: absolute position
This is all looking good, however in practice the relative and the absolute divs are displayed in front of the header, when scrolling.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
I know about z-index, however before using another CSS element, I would like to know if it's possible to solve this problem without adding a new variable to the already existing code. Thank you in advance!
This will work for you:
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
z-index: 0;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2 {
position: fixed;
background-color: white;
z-index: 9;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
I have just added z-index: 0; to div.relative and z-index: 9; to h2[the z-index to the h2 can be changed as per your requirement, it works as layer format, so if you want your h2 to be top of all elements you can even go with z-index: 9999;, but all this depends upon the other elements in the page.].
I believe adding a simple z-index: 1 to the header is the way to go.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Use z-index: 1; into your Fixed header will solved the problem.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: yellow;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Use z-index
h2{
z-index:2;
}
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
border-bottom:solid 1px #ccc;
top:0px;
z-index:2;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Adding a position to an element takes it out of the normal flow of the page. Which can cause them to overlap each other. The only way to make sure to the elements are displayed in the right order on the z-axis is with the z-index property in css.
h2{
position: fixed;
background-color: white;
z-index: 1;
}
Should be enough to fix your issues.
z-index is the most obvious and easiest way. Set the z-index to a high number like 9999 - z-index:9999. This will bring the header to the top most layer.
I've got a flex setup of list items to display information. I have a background image attached to these list items but I would like to create a zoom in effect when hovered or focused by a mouse. I think i'm partly on the way there, however my current setup makes it so that they are stretched out on mobile screens. I'm wondering if there's a way to achieve what i'm trying to do that is responsive.
I've searched for similar posts and I find that a lot of people use overflow: hidden; with a transform scale, I can't seem to get that to work with flex. Any help would be greatly appreciated!
body {
font-family: sans-serif;
}
h2 {
color: #3CAD5D;
padding-bottom: 0px;
margin-bottom: 0px;
}
ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 1500px;
width: 100%;
}
li {
display: flex;
width: calc(33.333333% - 10px);
}
a {
flex-grow: 1;
box-sizing: border-box;
text-decoration: none;
color: #000;
box-shadow: 3px 3px 5px #888888;
padding: 20px;
}
a:hover {
color: #fff;
}
/*** MEDIA QUERIES ***/
#media screen and (max-width: 800px) {
ul {
flex-direction: column;
/* change direction of flex for mobile */
margin: 0 auto;
}
li {
width: 97%;
}
}
/*** BG WITH ZOOM ***/
.bg1 {
background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
margin: 5px;
}
.bg2 {
background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
margin: 5px;
}
.bg3 {
background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
margin: 5px;
}
.bg1,
.bg2,
.bg3 {
background-size: 100% 100%;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg1:hover,
.bg2:hover,
.bg3:hover {
background-size: 130% 130%;
}
<ul>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
</ul>
Update
For the first 3 images:
Added a <div> to each <li> then removed .bg* .classes from the <li> and gave them to the new inner <div>. Then added overflow:hidden to <li>.
Added transform: scale(1.3) to the *:hover rulesets.
Changed background-size:100% 100% to background-size:cover
Demo
body {
font-family: sans-serif;
}
h2 {
color: #3CAD5D;
padding-bottom: 0px;
margin-bottom: 0px;
}
ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 1500px;
width: 100%;
}
li {
display: flex;
width: calc(33.333333% - 10px);
overflow: hidden;
}
a {
flex-grow: 1;
box-sizing: border-box;
text-decoration: none;
color: #000;
box-shadow: 3px 3px 5px #888888;
padding: 20px;
}
a:hover {
color: #fff;
}
/*** MEDIA QUERIES ***/
#media screen and (max-width: 800px) {
ul {
flex-direction: column;
/* change direction of flex for mobile */
margin: 0 auto;
}
li {
width: 97%;
}
}
/*** BG WITH ZOOM ***/
.bg1 {
background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
margin: 5px;
}
.bg2 {
background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
margin: 5px;
}
.bg3 {
background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
margin: 5px;
}
.bg1,
.bg2,
.bg3 {
background-size: cover;
/* Changed to cover */
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg1:hover,
.bg2:hover,
.bg3:hover {
transform: scale(1.3);
/* Changed to transform:scale() */
}
<ul>
<li>
<div class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li>
<div class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li>
<div class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
</ul>
I have a parent div with seven or more child divs within. I need to display 4 child divs across... the rest will wrap in subsequent rows of four divs each. I need the child divs to all have equal height, relative to the other three child divs that share the same row. The parent div is responsive as well, so it may end up displaying rows of 2 child divs across when the viewport is smaller.
display:inline-block does not solve this issue (unequal child div heights), and display:table-cell does not allow the child divs to wrap into subsequent rows. How can I accomplish my objectives?
Here is a very basic jfiddle: https://jsfiddle.net/hockey2112/3r2pL25v/
<div class="table">
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This div has a little more information in it, and therefore it will be taller than the other divs.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
.table {font-size: 9px;}
.tablecell {display: inline-block;
width: 23%; border: 1px solid #ff0000; vertical-align: top;}
To extend my comment regarding the usage of flexbox:
With flexbox, aligning the height of the elements along the cross-axis is done automatically, since the default value of justify-content is stretch.
All you have to do, is to set display: flex; on the container element. You may also want to add flex-wrap: wrap; in order for the child elements to wrap into multiple rows.
Also, the default flex-direction is row, so you don't need to specify that.
To sum up, you need to use the following CSS style:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 23%; /* grow = 1, shrink = 0, basis = 23% */
}
I have 3 types of layout, I'm just having trouble with the third.
I used css based table for the 2nd layout with two columns because of its flexibility in terms of height. But I can't able to bring the left column to the right.
The html markup should be as is. Only selector is allowed.
Please help me play with it. thanks guys!
body {
margin: 10px auto;
width: 80%
}
.wrapper {
margin: 10px;
width: 100%;
}
ul.menu {
background: orange;
padding: 10px
}
.content {
background: #ddd;
padding: 10px
}
/* table layout */
.wrapper.table {
display: table;
table-layout: fixed;
}
.table ul.menu,
.table .content {
display: table-cell;
vertical-align: top;
float: none
}
.table ul.menu {
width: 180px;
}
h2 {
font-weight: bold
}
<h2>Original layout</h2>
<div class="wrapper">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
<h2>New layout after adding the selector "table"</h2>
<div class="wrapper table">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
<h2>Need help with this. (bring menu section to the right after adding the selector "right")</h2>
<div class="wrapper table">
<ul class="menu right">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/g0x1o9bL/1/
rtl/ltr direction will do the trick :)
body { width:70%;margin:10px auto; }
.wrapper { width:100% }
.wrapper ul.menu { background:orange }
.wrapper .content { background:gray;}
.wrapper.table { display:table;table-layout:fixed;}
.wrapper.table ul.menu,
.wrapper.table .content { display: table-cell; direction: ltr;}
.wrapper.table ul.menu { width:180px; }
.wrapper.table.right { direction: rtl; }
<div class="wrapper">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
<br>
<div class="wrapper table">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
<br>
<div class="wrapper table right">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
Like I said in comment section, if jQuery is allowed this is working solution (maybe not best one, not sure)
$(function(){
var elem = $("ul.right").parent("div.table");
var ul_right = $("ul.right").remove();
elem.append(ul_right);
})
http://jsfiddle.net/thisizmonster/g0x1o9bL/5/