I'm trying to create a carousel slider with css, atm works fine on chrome/firefox/IE, it looks something like this:
Now I want the slider displays full on the screen since it's inside a container, so I added a trick to acomplish that:
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
And ended looking something like that:
That works fine on chrome, but on firefox and IE can't fully scroll the content. Is there a better solution that applying negative margins and paddings or fix that issue somehow?
EDIT: I need the slider inside the container since this is an example from my real website where I have more sliders inside the web and not just one on top
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
body {
overflow-x: hidden;
background-color: #f0f0e8;
}
.container {
background-color: #e2e7fe;
}
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
}
.slide {
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="slider">
<li class="slide"><img src="https://picsum.photos/id/1068/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/189/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/996/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/603/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/933/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/32/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/21/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/22/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/23/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/24/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/25/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/26/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/27/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/28/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/29/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/30/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/31/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/39/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/33/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/34/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/35/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/36/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/37/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/38/200/200"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<h1>Some content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in hac habitasse. Risus at ultrices mi tempus imperdiet nulla malesuada. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Vel pharetra vel turpis nunc eget lorem. Nulla pellentesque dignissim enim sit amet venenatis urna. Tincidunt eget nullam non nisi est sit amet facilisis. Ullamcorper sit amet risus nullam eget felis. Faucibus a pellentesque sit amet. Consectetur lorem donec massa sapien faucibus. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Id velit ut tortor pretium viverra suspendisse potenti. Mi sit amet mauris commodo quis imperdiet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A lacus vestibulum sed arcu. Sed libero enim sed faucibus turpis in eu mi. Aenean et tortor at risus viverra. Varius morbi enim nunc faucibus a pellentesque. Egestas sed sed risus pretium quam vulputate dignissim suspendisse.
</p>
<p>
Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Enim facilisis gravida neque convallis a cras semper auctor neque. Eu scelerisque felis imperdiet proin. Mi sit amet mauris commodo quis imperdiet massa. Neque sodales ut etiam sit amet nisl purus in mollis. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Sem fringilla ut morbi tincidunt augue interdum. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Sociis natoque penatibus et magnis. Dignissim convallis aenean et tortor at risus viverra. Feugiat in fermentum posuere urna. Faucibus scelerisque eleifend donec pretium vulputate sapien. Dolor purus non enim praesent elementum. Erat nam at lectus urna duis convallis convallis. Platea dictumst quisque sagittis purus. Ligula ullamcorper malesuada proin libero nunc consequat. Tortor condimentum lacinia quis vel eros donec ac odio tempor.
</p>
<p>
Tristique senectus et netus et malesuada fames ac. Congue nisi vitae suscipit tellus. Interdum consectetur libero id faucibus nisl tincidunt. Mauris vitae ultricies leo integer. Eros in cursus turpis massa tincidunt dui ut ornare lectus. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Pretium viverra suspendisse potenti nullam ac. Eu nisl nunc mi ipsum faucibus vitae aliquet. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Enim ut sem viverra aliquet eget sit. Dolor sit amet consectetur adipiscing. Amet nulla facilisi morbi tempus. Vulputate dignissim suspendisse in est ante in. Lectus urna duis convallis convallis tellus id. Vitae semper quis lectus nulla at volutpat diam ut. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Pretium quam vulputate dignissim suspendisse in est ante. Ac placerat vestibulum lectus mauris. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam.
</p>
<p>
Dui id ornare arcu odio. Sed id semper risus in. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Est ullamcorper eget nulla facilisi etiam dignissim. Nibh praesent tristique magna sit amet. Turpis egestas pretium aenean pharetra. Maecenas accumsan lacus vel facilisis volutpat. A cras semper auctor neque vitae tempus quam. Ultricies mi eget mauris pharetra et ultrices neque. Enim praesent elementum facilisis leo vel fringilla. Dolor magna eget est lorem ipsum. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Ut tristique et egestas quis. Id cursus metus aliquam eleifend mi in. Rhoncus dolor purus non enim praesent elementum facilisis leo. Sed lectus vestibulum mattis ullamcorper. Senectus et netus et malesuada fames ac turpis. Vestibulum sed arcu non odio euismod. Sagittis id consectetur purus ut faucibus pulvinar elementum.
</p>
<p>
Eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit amet nisl. Enim ut tellus elementum sagittis vitae et leo duis ut. Augue lacus viverra vitae congue eu consequat. Purus semper eget duis at tellus at. Sed egestas egestas fringilla phasellus faucibus. Libero volutpat sed cras ornare. Venenatis lectus magna fringilla urna porttitor rhoncus. Dolor magna eget est lorem. Sed blandit libero volutpat sed cras ornare. Id cursus metus aliquam eleifend mi in nulla posuere.
</p>
<p>
Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Ante in nibh mauris cursus mattis molestie. Sed elementum tempus egestas sed. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Vitae semper quis lectus nulla at volutpat. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Sed libero enim sed faucibus turpis in. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Senectus et netus et malesuada fames ac. Dui vivamus arcu felis bibendum ut tristique et. Gravida quis blandit turpis cursus in hac habitasse platea. Viverra accumsan in nisl nisi. Vel risus commodo viverra maecenas accumsan lacus vel. Scelerisque eleifend donec pretium vulputate sapien.
</p>
<p>
Turpis egestas sed tempus urna. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Magna ac placerat vestibulum lectus mauris. Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequat id porta nibh venenatis cras sed. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Diam quam nulla porttitor massa id neque. Justo eget magna fermentum iaculis eu non diam. Fermentum iaculis eu non diam phasellus. Aliquam ultrices sagittis orci a scelerisque purus semper. Sit amet nisl purus in mollis nunc sed id. Id aliquet risus feugiat in ante metus dictum at tempor. Quisque id diam vel quam elementum pulvinar etiam. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Venenatis a condimentum vitae sapien. Viverra adipiscing at in tellus integer feugiat scelerisque.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Since you don't want to take out the carousel slider div to be out of the container class. There is a fix for that too. I have used viewport width(vw) for it and then calculate it in the right way that the carousel will fit on full screen.
CSS:-
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin: 0;
padding: 0;
background-color: #e2e7fe;
width: calc(100vw);
position: relative;
left: 34.5em;
transform: translateX(-50%);
}
But please note that my fix will work only in large screens only (lg) termed in bootstrap. For medium(md), small(sm), and extra small(xs) screens, you have to calculate by yourself with same calculation I used for lg. Just you have to set media query for different resolutions for left position.
Working Fiddle:- https://jsfiddle.net/szreLuwn/2/
Hope, it fulfills your requirement.
Thanks
Related
i know the title might sound confusing, but basically i am wondering if there's any way to use paragraph breaks but without space at the top or bottom when there's nothing above or below the text?
body {
font-family:arial;
background:#222;
}
#wrapper {
width:100%;
margin-top:100px;
}
.post_container {
background:#fff;
border:1px solid red;
width:500px;
height:auto;
text-align:justify;
padding:15px;
margin:0 auto;
margin-bottom:50px;
}
.post {
font-size:16px;
}
<body>
<div id="wrapper">
<div class="post_container">
<div class="post">
<div style="height:auto;max-height:550px;overflow:auto;scrollbar-width:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue. Amet aliquam id diam maecenas ultricies mi. Mi quis hendrerit dolor magna eget est. Pharetra magna ac placerat vestibulum lectus. Sagittis vitae et leo duis. Id nibh tortor id aliquet. Nullam non nisi est sit. Urna molestie at elementum eu facilisis. Pellentesque id nibh tortor id aliquet. Eget nullam non nisi est sit. Velit sed ullamcorper morbi tincidunt. Ac auctor augue mauris augue. Velit aliquet sagittis id consectetur. Amet justo donec enim diam vulputate ut pharetra sit. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Cursus eget nunc scelerisque viverra mauris in aliquam sem.</p>
<p>At lectus urna duis convallis convallis tellus id. Egestas sed sed risus pretium quam vulputate dignissim. Tristique senectus et netus et malesuada fames ac turpis. Volutpat commodo sed egestas egestas fringilla. Ipsum dolor sit amet consectetur adipiscing. Donec massa sapien faucibus et molestie ac feugiat. Blandit massa enim nec dui nunc mattis enim. Id ornare arcu odio ut sem nulla pharetra diam sit. Id venenatis a condimentum vitae sapien. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Turpis in eu mi bibendum neque egestas congue quisque. Quis varius quam quisque id diam vel quam elementum pulvinar. Nunc scelerisque viverra mauris in aliquam. Turpis egestas maecenas pharetra convallis posuere. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Ornare suspendisse sed nisi lacus sed viverra. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Varius duis at consectetur lorem donec massa sapien faucibus. At consectetur lorem donec massa sapien faucibus et molestie ac.</p>
<p>Fringilla ut morbi tincidunt augue interdum velit euismod. Mi quis hendrerit dolor magna eget. Ultricies integer quis auctor elit sed vulputate mi sit. Quis lectus nulla at volutpat. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Duis convallis convallis tellus id. Dignissim sodales ut eu sem. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Non enim praesent elementum facilisis. Ultricies mi eget mauris pharetra. Id leo in vitae turpis massa sed elementum. Cursus risus at ultrices mi. In iaculis nunc sed augue lacus viverra vitae congue. Aliquet bibendum enim facilisis gravida neque convallis a cras. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla.</p>
<p>Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Ut venenatis tellus in metus vulputate eu. Nibh venenatis cras sed felis eget velit aliquet sagittis. Amet cursus sit amet dictum sit amet justo donec. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Purus sit amet luctus venenatis lectus. Augue interdum velit euismod in. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Non tellus orci ac auctor augue mauris augue neque. Arcu dui vivamus arcu felis. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Eget dolor morbi non arcu risus. Rutrum tellus pellentesque eu tincidunt tortor. Enim facilisis gravida neque convallis a cras semper. Quis ipsum suspendisse ultrices gravida. A cras semper auctor neque vitae tempus quam.</p>
<p>Tincidunt dui ut ornare lectus sit amet est placerat. Ultricies lacus sed turpis tincidunt. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Lectus quam id leo in vitae turpis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Hac habitasse platea dictumst quisque sagittis purus. Amet aliquam id diam maecenas ultricies mi eget mauris. A lacus vestibulum sed arcu non odio euismod lacinia. Magna etiam tempor orci eu. Velit laoreet id donec ultrices tincidunt arcu. Aenean pharetra magna ac placerat vestibulum lectus mauris. Turpis cursus in hac habitasse platea dictumst. Imperdiet nulla malesuada pellentesque elit eget gravida. Magna eget est lorem ipsum dolor sit amet. Sagittis purus sit amet volutpat. Morbi tristique senectus et netus et malesuada fames ac turpis.</p>
</div> <!-- scroll style -->
</div> <!-- post -->
</div> <!-- post container -->
</body>
You have 15px of padding coming from post_container which you can change to padding: 0 15px; to remove the top and bottom padding. Then you need to override the default p style of margin: 1em as others have indicated. One way is shown below:
body {
font-family:arial;
background:#222;
}
#wrapper {
width:100%;
margin-top:100px;
}
.post_container {
background:#fff;
border:1px solid red;
width:500px;
height:auto;
text-align:justify;
padding:0 15px;
margin:0 auto;
margin-bottom:50px;
}
.post {
font-size:16px;
}
<div id="wrapper">
<div class="post_container">
<div class="post">
<div style="max-height:550px;overflow:auto;scrollbar-width:none;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>At lectus urna duis convallis convallis tellus id. Egestas sed sed risus pretium quam vulputate dignissim. Tristique senectus et netus et malesuada fames ac turpis. Volutpat commodo sed egestas egestas fringilla. </p>
<p style="margin: 0;">Fringilla ut morbi tincidunt augue interdum velit euismod. Mi quis hendrerit dolor magna eget. Ultricies integ</p>
</div> <!-- scroll style -->
</div> <!-- post -->
</div> <!-- post container -->
add the following in your .css file:
p {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
My page does not scroll even when the content exceeds the page.
I've been changing the position settings of the body, html and div elements but I see no difference.
Here's the HTML:
html {
position: absolute;
overflow-y: scroll;
}
body {
background-color: dimgray !important;
}
body div {
position: absolute;
}
header {
position: fixed;
padding: 10px 0;
background-color: dimgray;
border-bottom: 1px solid black;
}
<header class="container-fluid">
<div class="row">
<div class="col-sm-4"><img src="/Fedecocagua.png"></div>
<div class="col-sm-8">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="Pruebah2.html" target="_blank" style="color: black">¿Quiénes somos?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bottom" style="color: black">Contáctanos</a>
</li>
</ul>
</div>
</div>
</header>
You are declaring your html and body as position:absolute, of course the page will not scroll. Remove this declaration as below:
body {
background-color: dimgray !important;
}
header {
position:fixed;
padding: 10px 0;
background-color: dimgray;
border-bottom: 1px solid black;
}
An element which is positioned absolute is removed from the flow of the document, thus it can be any size and will always sit outside of the document. Your html and body elements are sacred in this right; there are very few instances where you'd want to position them absolutely. Don't worry about the positioning, just create your content in div elements and it will scroll naturally when it exceeds the page height, like so:
div {
margin-bottom:50px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta nisi libero, id porta lacus rhoncus id. Pellentesque rutrum molestie maximus. In eu risus id magna tincidunt commodo placerat nec quam. Sed suscipit magna risus, quis rutrum nisl fringilla eget. Ut malesuada consequat quam, non mattis odio viverra blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ultrices nibh et congue sodales. Phasellus sem urna, aliquam id tristique non, lacinia a libero. Vivamus ac elit ligula. Phasellus et nulla viverra, ultrices nibh id, euismod quam. Sed aliquet scelerisque elit, id sodales augue.
</div>
<div>
Maecenas quis luctus odio. Vivamus in libero ligula. Proin viverra consectetur sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In rutrum ligula vitae sodales tincidunt. Etiam semper, libero sed pulvinar rhoncus, justo turpis lobortis elit, vitae dapibus magna massa a dolor. Sed tempor tortor id velit sollicitudin vestibulum. Integer ac felis orci. Etiam metus felis, porta at lectus eu, aliquet pharetra tortor. Curabitur varius tortor vitae tellus suscipit pharetra. Maecenas sit amet tortor ornare, viverra augue vitae, aliquet felis. Integer accumsan dolor ac imperdiet dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque lobortis non quam quis semper.
</div>
<div>
Curabitur ipsum risus, ultricies nec posuere at, finibus quis augue. Mauris ultrices massa quis ipsum tincidunt condimentum. Fusce feugiat id sapien non fermentum. Curabitur vel lectus laoreet velit eleifend tincidunt. Nulla tempus nisi nec lorem efficitur congue. Suspendisse laoreet arcu tempor est tempor pharetra. Sed suscipit vel lorem id elementum. Praesent vitae mauris justo. Vivamus non tellus ligula. Nunc laoreet tincidunt arcu eget maximus.
</div>
<div>
Mauris eu sagittis velit, quis vulputate ex. Vivamus pretium, urna venenatis scelerisque blandit, eros magna placerat ipsum, sit amet accumsan lacus erat non orci. Vestibulum sagittis fringilla mi, vel feugiat ante suscipit in. Sed pellentesque nulla urna, vel interdum augue placerat vitae. Fusce vitae tortor et libero tempus blandit. Donec rutrum venenatis faucibus. Proin luctus rhoncus mauris, nec dictum nisl dapibus eget. Phasellus sollicitudin orci nec augue ultrices, eu vestibulum dolor tincidunt. Integer lobortis eget nibh non ultrices.
</div>
<div>
Cras molestie lectus eget nisi mattis varius. Morbi feugiat in turpis eu fermentum. Nullam et tempus mi, eget ultricies ex. In cursus, lorem id aliquet eleifend, velit ipsum ultricies nisl, sed ultricies nisi arcu ut augue. Nulla pretium ligula et ipsum sodales, vel scelerisque est porttitor. Nulla vitae mi eget quam sodales efficitur at non ex. Fusce imperdiet orci et urna varius rutrum. Donec efficitur tellus non tempor varius. In mattis tortor non metus porttitor fermentum. Etiam dapibus quam augue, et sollicitudin sem feugiat quis. Vestibulum id tortor a elit tempus ultricies semper sit amet nunc. </div>
</div>
My div with controllers overflow span with text inside td.
Can I make force span to margin from controllers div on their show?
Here what I need:
And here what I have:
Here is my code:
.controllers {
position: absolute;
right: 0px;
top: -4px;
display: none;
transition: visibility 0.5s, opacity 0.5s linear;
opacity: 1;
}
<tr onmouseover="document.getElementById('row2').style.display='block';"
onmouseout="document.getElementById('row2').style.display='none';">
<td class="mdl-data-table__cell--non-numeric">2048</td>
<td class="mdl-data-table__cell--non-numeric">Lorem text</td>
<td class="mdl-data-table__cell--non-numeric">
<div style="position: relative; vertical-align: top;">
<span>Very long content Very long content Very long content Very long content Very long content Very long content</span>
<div class="controllers" id="row2">
<div class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="edit2">
<i class="material-icons">edit</i>
</div>
<span class="mdl-tooltip" for="edit1">Edit</span>
<div class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="delete2">
<i class="material-icons">delete</i>
</div>
<span class="mdl-tooltip" for="delete2">Delete</span>
</div>
</div>
</td>
</tr>
Any display:inline; element (such as a non-redefined span) does not have a defined width.
Can you use floats? float:right;ing your buttons before outputting the content might do the trick:
http://dabblet.com/gist/7d8b25a7c18e956c77b1
div{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
.fr { float:right; }
<span class="fr"><button>Del</button><button>Edit</button></span>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id ornare mi. Duis id dapibus est. Integer egestas eleifend ipsum sed facilisis. Suspendisse rhoncus, quam quis ultricies rutrum, ipsum erat lobortis enim, vel ultrices purus diam non ligula. Donec ullamcorper orci malesuada, ornare orci mollis, vehicula tortor. Phasellus vitae pulvinar lacus. In eu odio nec est mollis ultrices eget rhoncus erat. Morbi pellentesque quam viverra egestas ullamcorper. Praesent tristique felis vel nibh pharetra varius. Ut ut luctus orci, vitae rhoncus velit. Fusce luctus, ligula eu fringilla venenatis, ipsum tellus elementum nisl, lobortis iaculis sapien quam cursus neque. Maecenas maximus finibus justo at blandit. Nam blandit scelerisque metus non facilisis. Vestibulum dictum eu eros vel accumsan. Duis massa leo, aliquam non ullamcorper eu, rhoncus et lacus.Proin pretium semper purus sit amet mollis. Sed non nibh vel diam tempor dapibus. Mauris dapibus augue augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam quis nulla massa. Donec sodales nisi urna, ac pharetra nibh gravida in. Vestibulum blandit sit amet massa ac vehicula. Duis nibh odio, ultricies quis leo eu, semper vestibulum mauris. Suspendisse egestas euismod augue non fermentum.Donec congue massa quis purus posuere, eu egestas nunc ullamcorper. Vestibulum pellentesque urna pulvinar, vestibulum augue quis, dictum mi. Donec sit amet tortor vel leo vulputate sollicitudin vitae nec mi. Curabitur euismod sed sapien in pellentesque. Curabitur eros tortor, porta non magna gravida, euismod ultricies velit. Aliquam varius magna diam. Sed feugiat sapien sit amet cursus semper. Praesent tincidunt, libero eget tristique finibus, ipsum purus pellentesque magna, et porttitor enim nisl quis arcu. Suspendisse lacinia eleifend pulvinar. Sed placerat euismod porta.Pellentesque rhoncus, enim sed commodo viverra, libero arcu dignissim nisl, sit amet rutrum erat libero quis nisi. Maecenas ornare hendrerit sagittis. Mauris posuere lorem ante, non aliquet turpis bibendum id. Praesent suscipit, justo eget porta mollis, leo dui blandit ex, et rutrum eros turpis ut sapien. Suspendisse dapibus sit amet sapien ac hendrerit. Suspendisse nec urna auctor, interdum ex quis, dictum lectus. Vestibulum sit amet mauris a dolor laoreet congue. Sed mollis, metus eu fringilla finibus, dolor ipsum posuere lacus, eget aliquam enim nisl id risus. Quisque vitae eros porta, molestie nibh ac, dictum purus. Curabitur blandit justo id hendrerit tempor.Mauris ut fermentum ante. Ut finibus efficitur massa vitae auctor. Nullam laoreet tristique felis et mattis. Praesent ultrices, libero eu sagittis facilisis, ipsum diam auctor mauris, non hendrerit justo massa ut augue. Vivamus varius ipsum id lorem cursus aliquet. Aliquam erat volutpat. Pellentesque fermentum mi vitae finibus placerat. Nunc blandit leo aliquam ullamcorper euismod. Donec varius et tortor sit amet euismod. Phasellus non ipsum in diam tristique fermentum id vitae tortor.
</div>
NOTE: works with spans wrapping the content, too, I just used a div outta habit.
What I want to do is to create two fixed navigation elements (each on the opposite side of the page). I did that, but the problem is; it is not responsive. When I zoom-in or zoom-out, elements mix together.
How can I fix it? Here is the code I have tried so far:
.docTheme {
margin-top: 20px;
padding-left: 0;
margin-left: 10px;
}
.leftNav { /* add rounded corner */
position: fixed;
}
.rightNav {
position: fixed;
right: 0;
}
.mainContent {
display: block;
margin-left: 320px;
width: 65%;
}
<!-- Content -->
<div class="container-fluid docTheme" role="main">
<div class="row">
<div class="col-sm-3 leftNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
<div class="col-sm-7 mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat. Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium. Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolo
Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis eu.
Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit eu dolor sit amet, egestas convallis nibh. Nam ultricies elit ut tincidunt congue. Aliquam ac dui vel arcu condimentum pharetra. Phasellus porta, sem sed tempus aliquam, urna nisl posuere sem, non auctor nibh risus faucibus turpis. Integer sit amet cursus lectus. Nam hendrerit, nisl sed fringilla volutpat, leo neque fringilla magna, a maximus metus mauris nec urna. Duis nulla dui, dignissim at felis id, tristique laoreet nibh. Pellentesque convallis neque a purus convallis lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat. Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium. Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolor.
</div>
<div class="col-sm-2 rightNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
In this chapter
In this chapter
In this chapter
In this chapterros
</div>
</div>
</div>
</div> <!-- /container -->
Thanks.
I think you need one like this
.docTheme {
margin-top: 20px;
padding-left: 0;
margin-left: 10px;
}
.leftNav {
/* add rounded corner */
position: fixed;
top: 0;
left: 0;
width: 33%;
}
.rightNav {
position: fixed;
right: 0;
top: 0;
width: 33%;
}
.mainContent {
display: block;
margin-left: 33%;
width: 33%;
}
<!-- Content -->
<div class="container-fluid docTheme" role="main">
<div class="row">
<div class="col-sm-3 leftNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
<div class="col-sm-7 mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat.
Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium.
Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolo Nam feugiat purus eu velit condimentum
rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id
sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis eu. Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea
dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit
eu dolor sit amet, egestas convallis nibh. Nam ultricies elit ut tincidunt congue. Aliquam ac dui vel arcu condimentum pharetra. Phasellus porta, sem sed tempus aliquam, urna nisl posuere sem, non auctor nibh risus faucibus turpis. Integer sit amet
cursus lectus. Nam hendrerit, nisl sed fringilla volutpat, leo neque fringilla magna, a maximus metus mauris nec urna. Duis nulla dui, dignissim at felis id, tristique laoreet nibh. Pellentesque convallis neque a purus convallis lobortis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat.
Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium.
Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolor.
</div>
<div class="col-sm-2 rightNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
In this chapter
In this chapter
In this chapter
In this chapterros
</div>
</div>
</div>
</div>
<!-- /container -->
I need the red box to expand with the blue box content, so they are always both the same size.
The red box is defined as:
.leftMenu{
float:left;
width:20%;
background-image:url(../images/leftMenuBG.jpg);
background-position:bottom;
background-color:#BFDAE3;
background-repeat:repeat-x;
}
Can't seem to get it to work, whatever I try! Any ideas? Thanks!
Simple solution: Use tables.
Semantic solution: Use faux columns.
You will need to wrap the red div around the blue div, so have the blue divs inside, floated right, and then have a clearing div after the blue divs.
<div style="border:solid red 2px;">
<div style="border:solid blue 2px;float:right;width:200px;">
<p>Content here</p>
</div>
<div style="clear:both;"></div>
</div>
Excuse the use of inline styles, these should be in a style sheet.
If you need each div to sit independently of each other and don't mind using JavaScript (as this is only a presentational layer) try this method.
You can use a jQuery plugin for that too. (for example, http://www.cssnewbie.com/equal-height-columns-with-jquery/)
But the Semantic solution: Use faux columns. from Magnar is nice too and doesn't require Javascript.
An additional 'faux column'-method is to (ab)use positioning.
Place both boxes inside a container that's floated (which makes it expand to accomodate floated children) and positioned relatively (which allows us to position child elements inside it).
Then, position the shortest column absolutely, and float the longest column. The container will take on the height of the floated child, and the div with position:absolute will take that height again.
A short example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Columns</title>
<style type="text/css">
html, body {
width: 100%;
}
#container {
width: 100%;
float: left;
position: relative;
border: 2px solid black;
}
#left-box {
position: absolute;
width: 40%;
border: 2px solid red;
background-color: #5555ee;
height: 100%;
}
#right-box {
float: right;
margin-right: 15%;
width: 40%;
border: 2px solid blue;
background-color: #3e3e3e;
}
</style>
</head>
<body>
<div id="container">
<div id="left-box">
- E - x - P - a - N - d - I - n - G -
</div>
<div id="right-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis eros ut sem sollicitudin ultricies. Vivamus pharetra, urna sit amet auctor mollis, risus sem ultrices quam, non condimentum enim leo sit amet tellus. Pellentesque id vehicula nisl. Nulla ut commodo ligula. Sed sit amet ligula purus, at suscipit leo. Nulla quis nulla id est aliquet vehicula. Suspendisse consectetur, nunc in hendrerit dignissim, nisl massa viverra quam, et faucibus augue lorem eu mi. Vestibulum commodo luctus ante, vel placerat metus ullamcorper vel. Sed id imperdiet orci. In hac habitasse platea dictumst. Praesent ac dui orci, vitae pharetra dolor.
</p>
<p>
Aenean enim metus, placerat at hendrerit in, hendrerit in velit. Cras tincidunt blandit sapien, a aliquet elit sollicitudin vitae. Quisque at ligula sem. In hac habitasse platea dictumst. Ut eu magna ipsum, id fringilla massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consequat metus sed lectus dignissim posuere quis a felis. Mauris in consectetur arcu. Nullam fermentum adipiscing dignissim. Sed quis orci in magna viverra sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum lectus pretium tortor porta a hendrerit dui pharetra. Etiam est justo, bibendum vehicula vestibulum ac, mattis ut risus. Praesent dapibus nibh id enim vestibulum porta. Donec aliquam urna a diam varius blandit. Nulla interdum ante at arcu vehicula sagittis. Curabitur quam sapien, luctus ac sagittis vitae, tristique a odio. Nulla consequat gravida urna, at bibendum nisl ultricies ac.
</p>
<p>
Vivamus quis metus porta purus aliquet aliquet. Morbi sollicitudin orci ut ligula vehicula sollicitudin. Etiam sed lacus eget leo molestie ullamcorper sit amet ac urna. Cras vitae turpis in sapien dignissim molestie. Curabitur tellus purus, dignissim at adipiscing in, faucibus ac tortor. Duis vitae metus ac urna cursus consequat eget vel quam. Integer bibendum mauris enim, sit amet blandit sapien. Nam in lectus ante. Curabitur lacinia erat sit amet lectus malesuada facilisis. Phasellus et pellentesque enim. Fusce eget tristique est. Suspendisse id dui eu lorem congue tincidunt. Cras libero lectus, placerat eget tristique a, gravida vitae lorem. Sed nec venenatis sapien. Suspendisse tempus orci ut odio venenatis et cursus sem faucibus. Mauris commodo ultricies dictum. Curabitur iaculis, ligula sit amet lobortis hendrerit, eros orci elementum nisi, cursus lacinia nunc felis vitae erat. Donec id elementum ipsum.
</p>
<p>
Mauris id mi sed augue egestas vestibulum non a ipsum. Ut arcu purus, consequat in tincidunt in, pretium a dui. Cras in quam tellus, non ultricies nisi. Sed leo orci, gravida et luctus sed, eleifend quis odio. Praesent cursus feugiat neque, tincidunt malesuada libero egestas sit amet. Etiam nisi nisi, faucibus vitae accumsan sed, gravida ut lacus. Suspendisse hendrerit fringilla interdum. Cras fermentum nibh non eros gravida pretium et a sem. Sed non nisl dui, non commodo arcu. Donec nec massa mi, vel auctor odio. Curabitur sagittis velit id felis egestas iaculis. Nunc pharetra magna eu metus malesuada ut porta mi suscipit. Aenean vitae elit sit amet neque pellentesque malesuada. Aliquam eu nulla consectetur est adipiscing vulputate non a odio. Sed consectetur neque eros. Nulla fermentum vehicula vestibulum. Aenean eleifend, nisi eget porta accumsan, tellus orci tincidunt metus, volutpat lobortis quam augue commodo tellus. Aenean consectetur pretium vestibulum. Pellentesque a scelerisque sem. Cras pellentesque tortor euismod magna viverra mollis.
</p>
<p>
Mauris dignissim sodales placerat. Sed id interdum erat. Nunc sagittis, nunc in auctor ullamcorper, nisi dolor commodo sem, sit amet aliquam diam dolor posuere est. Ut vestibulum elit ut urna imperdiet non tincidunt sapien euismod. Fusce ut sem erat, aliquam accumsan metus. Proin sed velit nec velit laoreet dignissim at sit amet ante. Pellentesque ac dolor non nulla dapibus lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non nisl diam. Sed et ligula sed libero porttitor semper eget eu elit. Phasellus quis massa dolor. Phasellus ac justo ac diam ultrices iaculis quis at odio. Fusce eget nisi nunc. Cras cursus, dui eget mattis rutrum, arcu dolor sollicitudin nibh, eu congue augue quam ut leo. Praesent in est nulla, eu ullamcorper enim. Nullam in adipiscing ligula.
</p>
</div>
</div>
</body>