I have a small Problem. I am trying to make the structure from image. I have the CSS and HTML
.mask-skew {
transform: skewX(-10deg);
/*width: 300px;*/
height: 390px;
overflow: hidden;
margin: 5px;
/*border: 2px solid orange;*/
}
.art-skew {
transform: skewX(10deg);
position: relative;
left: -50%;
}
<div class="row flex--row advertising-row">
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/BarbourSS18Banner_1140x392px.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/TeaserWellensteynKopie.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/template_teaser_images_fjallraven.jpg" alt="">
</div>
</div>
But the result is from this Image
How can I obtain the result from first image. The left and right image has straight edge.
You could basicly, skew links and then unskew img.
overflow:hidden will need to be used to cover the whole screen/link.
example
body {margin:0;}
div {
overflow:hidden;
}
nav {
display:flex;
height:100vh;
margin:0 -10vw
}
nav a {
flex:1;
height:100%;
transform:skew(-15deg);
overflow:hidden;
}
nav a + a {
margin-left:3vh;
}
nav a img {
width:140%;
height:100%;
display:block;
/* optionnal */
/*object-fit: cover;
object-position:center center;*/
transform:skew(15deg);
margin:0 -20%; /* in relation with width */
}
<div>
<nav>
<img src="http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg">
<img src="https://images.wallpaperscraft.com/image/pool_skyscraper_hotel_124522_1600x1200.jpg">
<img src="https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg">
</nav>
</div>
object-fit can also help to make sure image fills entire link. it will be clipped.
For the text, it can be added aside img. and centered via flex. pen to play with : https://codepen.io/gc-nomade/pen/vaJzaM
if you want to use background-image and a link on top of it, you may inspire yourself from https://codepen.io/gc-nomade/pen/vGvRPZ/ (turn titles into links)
Both example skew the container, then apply the opposite skew value to unskew content.
Straight edges are made from letting content overflowing but hidden outside edges.
I created app with below code in html file
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg>
<div class="header-social">
<img style="width:18%; margin-right:3vw src="assets/img/love-btn.png">
<img style="width:40%; src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw src="assets/img/chat-btn.png">
<div>
<div class="profile>
<img src="assets/img/profile-pic.png">
</div>
<div>
</ion-content>
and css is as below
.header-parent{
position: relative;
text-align: center;
}
.header-social{
position: absolute;
bottom: 0px;
text-align: center;
margin-top: -5.5vh;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
This shows the page as
My Question is red heart button, blue friend button and green chat button should display below the background image as per the css…but why are they displaying above image? bg2.jpg image is inside the div and all those 3 buttons are given position absolute and bottom:0 so they should display below image as div containing image should end at image.
What is wrong in my understanding? Please clarify…I have spent hours to understand this but still no luck why is it behaving like this?
First you should write your html code properly there is lots of syntax error in ur html code.
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg">
<div class="header-social">
<img style="width:18%; margin-right:3vw" src="assets/img/love-btn.png">
<img style="width:40%;" src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw" src="assets/img/chat-btn.png">
<div>
<div class="profile">
<img src="assets/img/profile-pic.png">
</div>
</ion-content>
And try this css
.header-parent{
text-align: center;
}
.header-social{
position:fixed;
width:100%;
bottom: 0px;
text-align: center;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
Negative margin of -5.5vh is causing the .header-social to move up and overlap on the profile pic. Here's how your CSS should be to get the desired output.
.header-parent{
background-image:('assets/img/bg2.jpg'); //bg image would be a better option rather than an img tag
position:relative; //for positioning profile div relatively
}
.header-social{
position:absolute;
bottom:0;
}
.profile{
width: 25%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//this will position the profile pic centered both horizontally & vertically.
}
I need to create an image gallery as shown below. It's working fine but I need to put a title below the image (each and every image has a title). When I have tried like below - that title is not showing correctly. Can you show me how to do that?
Html
<ul id="thumbnailsList">
<li *ngFor="let image of datasource">
<img src="{{image.url}}" class="tn" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image)>
<div class="myClass"><strong>{{image.title}}</strong></div>
</li>
</ul>
css
.myClass {
position: absolute;
}
Result :
Update :
When I removed the .myClass it shows like below.But I need to show images horizontally and text bottom of the image.
To make it work using position:absolute, you need to give a parent container a position property doing:
#thumbnailsList li
position: relative
I have done it using Bootstrap responsive design.
HTML
<div class="row">
<div *ngFor="let image of dataCollection" class="col-md-3 col-sm-4 col-xs-6">
<img class="img-responsive tn" src="{{image.blobFileUrl}}" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image) />
<div class="desc">{{image.name}}</div>
</div>
</div>
CSS
div.desc {
padding: 15px;
text-align: center;
}
.tn {
margin: 2px 0px;
box-shadow: #999 1px 1px 3px 1px;
cursor: pointer;
width: 100% !important;
height: 200px !important;
}
this is my html code inside the page
<style type="text/css">
.container{width:100%;}
.left{float:left;}
.right{float:right;}
.center{margin:0 auto;}
</style>
<ul class="invite container" >
<li class="container">
<span class="left">
<img src="images/main-bride.jpg" height="200px" />
</span>
<span class="frame right">
<img src="images/main-groom.jpg" height="200px" />
</span>
<!-- <span class="center" background="images/frame.png"> hello</span> -->
</li>
<!-- <li class="right">
<span class="frame"><img src="images/main-groom.jpg" height="200px" /></span>
</li> -->
</ul>
and this is the css code:
.frame {
display: block;
line-height: 0px;
background: url(../images/frame.png) no-repeat center center;
}
.frame img {border: 10px solid #fff;}
everything else is working is find but only the background image is not visible. any thing that I'm missing? plz help.
IF Your background should be 10px around the image, than the white border of the image and the image is hiding it.
Try to add:
.frame {display: block; padding: 10px; background-repeat: repeat;}
.frame img {border: 0px;}
And check if the background is visible "around" the image. Remember that frame.png can be small and still hidden under the image. You must be carefull to adjust all the sizes correct.
Few words of explanation: In that case, You are setting padding on the parent element, so there will be 10px space from each side of the image. In that case 10px frame will be seen from the .frame element, and the image will cover the center of it.
If You want the background to overwrite the image, use:
.frame img {display: none;}
.frame {display: block; height: ...px; width: ...px;}
Why downvote? It would be nice to write something, thx.
is that css for the background in a file one level up from the index page or inline on the index page ? your css for the background url says
background: url(../images/frame.png) no-repeat center center;
background: url(.. go up one level
/images/ down into images folder
frame.png find the file called frame.png
) no-repeat center center;
check your paths.
This is probably a variation on something that has been solved dozens of times but CSS really makes me feel like a fool.
I am trying to build a widget that can be positioned and sized in a variety of ways. It's a pretty simple layout - fixed-height header, fixed-height footer, and a body that takes up the remaining space. The overall width and height varies. The content of the body needs to scroll. I have the overall container, header, footer, and body sizing ok.
But what I want is for the body to scroll when it needs to WITHOUT shrinking content to the left when the scrollbar appears. That is, I want the body to be as wide as it can MINUS the scrollbar that would be there iF it needed to scroll, so that when it DOES need to scroll there is no shrink. In effect, I want this:
| - - - unknown width - - -|
+--------------------------+
| content |*|
| might |*|
| scroll |*|
+--------------------------+
I want the content that might scroll to be as wide as it can MINUS the potential scrollbar width (|*| region).
What I have now is something like this:
<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
<div id="scrollContent" style="???">
</div>
</div>
I have tried margins, padding, even %-widths for the inner-most div and all 'do the shift' thing. I also need this to work in FF3, IE7/8 and (fantasy?) IE6.
Use overflow: scroll instead of overflow: auto - that'll force a scrollbar to always appear.
The answer by Mattias Ottosson to another question offers a crucial piece of information - the vw units are based on the viewport width including the scrollbar, while percentages will be based on the available width which doesn't include the space taken up by the scrollbar. In other words, for an element taking up the full width of the page, the width of the scroll bar can represented as calc(100vw - 100%)
If we have a top-level element taking up 100% of the available width, then we can use this to control what changes size when the scrollbar becomes visible. Let's say our goal layout is something like this:
.app {
display: grid;
grid-template-columns: 1fr 50vh 1fr;
}
Where we want the middle column to be 50% as wide as the viewport height and the rest of the width divided between the left and right column. If we used that, then the addition of a scrollbar means that the horizontal space lost to the scrollbar (about 15px on chrome) is taken out of the width of the left and right columns equally. This can cause an ugly shift when a ui change causes the scrollbar to appear while the main content in the grid remains the same or similar. See the first snippet below.
We can use the calculated width of the scrollbar to instead only shrink the right column:
.app {
display: grid;
grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
}
See the second snippet below. Unfortunately this means the fr units can't be used and the width of the columns must be specified a little more manually. In this case the width of the left column is half of the viewport width minus the 50vh taken up by the center column. The width of the right column is the space remaining from the available width (100% rather than 100vw) after subtracting the combined width of the left and center columns. This is clearer in the formula:
calc(100% - ((100vw - 50vh)/2) - (50vh))
which reduces to the one above
First snippet, ugly jump when scrollbar appears
$('button').click(() => {
$('.footer').toggle()
})
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
font-family: 'Archivo', sans-serif ;
}
.app {
margin: auto;
display: grid;
grid-template-columns: 1fr 50vh 1fr;
text-align: center;
height: 100%;
width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
padding: 10px;
min-height: 50vh;
border: 1px solid black;
}
.left-column {
border-right: none;
background-color:#def;
}
.center-column {
background-color:#e1ebbd;
}
.right-column {
text-align: left;
border-left: none;
background: #fb1;
}
.footer {
grid-column: 1 / span 3;
height: 2000px;
background: #753;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="left-column">
Left
</div>
<div class="center-column">
Center
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><br>
<button>Toggle footer</button>
</div>
<div class="right-column">
Right
</div>
<div class="footer">
</div>
</div>
</body>
</html>
second snippet, right column shrinks when scrollbar appears
$('button').click(() => {
$('.footer').toggle()
})
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
font-family: 'Archivo', sans-serif ;
}
.app {
margin: auto;
display: grid;
grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
text-align: center;
height: 100%;
width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
padding: 10px;
min-height: 50vh;
border: 1px solid black;
}
.left-column {
border-right: none;
background-color:#def;
}
.center-column {
background-color:#e1ebbd;
}
.right-column {
text-align: left;
border-left: none;
background: #fb1;
}
.footer {
grid-column: 1 / span 3;
height: 2000px;
background: #753;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="left-column">
Left
</div>
<div class="center-column">
Center
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><br>
<button>Toggle footer</button>
</div>
<div class="right-column">
Right
</div>
<div class="footer">
</div>
</div>
</body>
</html>
The only way you can "get" and use the scrollbar-width with pure CSS is to actually have the scrollbar be there. Now, we don't want to force the scrollbar be visible all the time, so what we have to do is this:
Make a container for all of the website's content that always has the scrollbar shown, and hide it. It's surprisingly simple!
I've created a Fiddle. Here it is as a snippet:
/* The trick: */
html {
overflow-x: hidden;
}
body {
margin: 0;
width: 100vw;
}
body > * {
overflow-y: scroll;
margin-right: -100px;
padding-right: 100px;
}
/* Other styling: */
body {
font-family: sans-serif;
user-select: none;
--color: rgb(255 191 191);
}
header {
position: sticky;
top: 0;
z-index: 1;
--color: rgb(191 191 255);
}
body > * > div {
background-color: var(--color);
border: 3px solid;
margin: 10px;
padding: 10px 20px;
font-size: 20px;
font-weight: bold;
}
label::before {
position: relative;
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin: 0 10px;
top: .2em;
border: 1px solid;
border-radius: .1em;
}
input:checked + label::before {
background-color: var(--color);
box-shadow: inset 0 0 0 1px #FFF;
}
input {
display: none;
}
input:not(:checked) ~ div {
display: none;
}
input ~ div {
height: 200vh;
}
<header>
<div>I am sticky!</div>
</header>
<main>
<div>Hello world!</div>
<input id="foo-2" type="checkbox" />
<label for="foo-2">Click me</label>
<div>Let's scroll</div>
</main>
The trick is giving the containing elements a negative margin and positive padding to the right. The offset used for these two properties can exceed the scrollbar-width, so making it 100px is plenty — I can't imagine any browser or website having scrollbars wider than 20px, let alone 100px.
By the way: The reason I'm applying these styles to every direct child of body, instead of having a single #container element, is because otherwise position: sticky wouldn't work. To have that feature work on an element, it can only have one anscestor with scrolling capabilities.
html contains #container contains sticky element -> does not work
html contains sticky container -> does work
Why not displaying always the scrollbars, even when there is no need to scroll?
You can achieve this by setting overflow:scroll; to the container.
Add another wrapper inside the element that will have the overflow:auto style and set it to about 18px narrower. The scrollbar should appear in that 18px gap.
I had a problem that is similar that I used the below solution for, I am not sure if this can be a solution to what you want to do, but it could be.
I had a div that resized to content automatically, and then the scroll was added, shrinking the inside, so that the table in it wrapped text, instead of making the container that much wider. The unwanted effect is seen in the below Old example, if the textarea is resized downward and the scroll appears.
My ugly solution was to add a div inside the overflow-y:auto-div, that had display:inline-block, and to add yet another small inline-block div after it, that was 19 pixels wide (reserved for scrollbar) and a pixel high. That little div would appear beside the real div when the browser resized the div to the content, and when the scrollbar appear, the small div is pushed down under the real div, and the real div keeps it's with. It will cause a one pixel bottom "margin", but hopefully not a problem. When no scrollbar ppears, there is 19 pixel of unused space beside the real div, as described in the Question.
(The outermost div is just there to replicate my setup/problem.)
Old:
<div style="display:inline-block">
<div style="max-height:120px; overflow-y:auto; border:1px solid gray">
<table border=1><tr>
<td>I do not</td><td>want this to</td>
<td>add breaks in the text.</td>
</tr></table>
<textarea rows=3 cols=15>Resize me down</textarea>
</div>
</div>
<br>
New:
<div style="display:inline-block">
<div style="max-height:150px;overflow-y:auto; border:1px solid gray">
<div style="display:inline-block">
<table border=1><tr>
<td>I do not</td><td>want this to</td>
<td>add breaks in the text.</td>
</tr></table>
<textarea rows=3 cols=15>Resize me down</textarea>
</div>
<div style="display:inline-block; width:19px; height:1px"></div>
</div>
</div>
<br>
I know that you want achieve this with CSS only, but I am giving a jQuery solution in case someone might find help.
Using jQuery, you can get the scrollbar size and then apply a margin to the container.
Something like this:
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}
The above code snippet will add a margin if the height of all the content is greater than the container height.
We can also remove the horizontal scrollbar if it isn't needed:
body{
overflow-x:hidden;
}
You can do it with using this css on the content element: `calc(100% - 15px)`.
// calc(100% - the width we want to give on right hand side of content)
Please read below to check how will it work.
Definitely the most easy and less messy way to fix it using the overflow:scroll.
But if you do not want to show the scroll when it is not required then you should use the width in with respect to viewport (vw) instead of using 100%. As scrollbar comes in the viewport width, if we are aware about the width of scrollbar then we can accomplish our task using the below formula. Here i am setting the content width as viewport width minus the width of the scrollbar(let say 15px).
You need to provide width as: calc(100% - 15px). You can provide width in %, em etc.
The best would be if you override the width of scrollbar like below and then use that width value in your formula to subtract.
/* width */
::-webkit-scrollbar {
width: 10px;
}
#content {
width: calc(100% - 10px).
}
Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79. And this CSS only works in webkit browsers, so it might not work in IE.
So you can use 20px of maximim width to subtract becasue scrollbar can never take width more than 20px. Please find below the working code.
.scroll {
height: 100px;
overflow: auto;
border: 1px solid black;
width: 75%;
}
.zui-table {
width: calc(100% - 10px);
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<div class="scroll">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
</div>
I had a similar scenario where I had a grid - heading row and actual data rows below it. The Data rows may be too much and get scrollbar, which will cause the cells in the rows to missalign from the cells in the heading row.
I solved this by using position:absolute on the right column in the rows, which contains a couple of buttons. Don't know if this will be applicable to your case, but it was perfect for mine.
Here is an example:
function toggleMoreRows() {
document.getElementById('grid-body').classList.toggle('more-rows');
}
body {
font-size: 13px;
font-family: Arial, Verdana, sans-serif;
}
.grid-heading {
width: 500px;
background: #CCC;
font-weight: bold;
}
.grid-body {
width: 500px;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.row {
height: 32px;
display: flex;
align-items: stretch;
position: relative;
}
.row.hidden {
display: none;
}
.more-rows .row.hidden {
display: flex;
}
.cell {
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.cell.actions {
width: 200px;
height: 100%;
justify-content: space-around;
position: absolute;
left: 300px;
top: 0;
}
<p><button onClick="toggleMoreRows()">Toggle more rows</button></p>
<div class="row grid-heading">
<div class="cell">First name</div>
<div class="cell">Last name</div>
<div class="cell">Age</div>
<div class="cell actions">Actions</div>
</div>
<div class="grid-body" id="grid-body">
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
</div>
The problem is once you hover over the container and the scrollbar appears, then the content width shrinks. So even if you use a nested container whose width is equal to the container minus its scrollbar, the width of nested container will also shrink.
One solution is to increase the size of the contents by the width of the scrollbar on hover. Here is a solution that doesn't need to use any nested outer containers (categoryCont is the scrolling container and each menuBlock is one of the items to be scrolled):
<div id="categoryCont" style="position:relative;width:200px; overflow:hidden;">
<div class="menuBlock" style="width:200px">a</div>
<div class="menuBlock" style="width:200px">b</div>
<div class="menuBlock" style="width:200px">c</div>
...
</div>
<style type="text/css">
#categoryCont:hover{
overflow-y: auto;
}
#categoryCont:hover .menuBlock{
/* Increase size of menu block when scrollbar appears */
width: 218px; /* Adjust for width of scroll bar. */
}
</style>
One issue with the above is that the width of scrollbar differs slightly in different browsers. One of the following should help:
By using px
Make the content an absolute value with left indent as an absolute value
<div class="menuBlock" style="width:200px">
a
</div>
changes to
<div class="menuBlock" style="width:200px">
<span>a</span>
</div>
<style>
.menuBlock span{ /* Good cross-browser solution but cannot use % */
position:absolute;
left:70px;
}
</style>
By using %
You need both CSS and jQuery(First step is same)
<div class="menuBlock" style="width:200px">
a
</div>
changes to
<div class="menuBlock" style="width:200px">
<span>a</span>
</div>
<style>
.menuBlock span{ /* Good cross-browser solution but cannot use % */
position:absolute; /* This one does not use 'left' */
}
</style>
<script>
// Indent left 30% because container width remains same but content width changes
var leftIndent = (30/100) * $("#categoryCont").width();
$(".menuBlock span").css({"left":leftIndent});
</script>
I'm not really sure what your asking (sorry, I have very little CSS experience), but I think you want to set the width of an HTML div element to 100% with CSS, without having a scroll bar appear. Here is a solution.
#element {
background-color: blue;
height: 40px;
position: relative;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="element"></div>
</body>
</html>
A scroll bar appears because of the position, margin and padding properties of the div element. If you set the margin-right, margin-left, padding-right, and padding-left properties to 0, and you set the position property to relative, no scroll bar will appear.
* {
overflow: hidden;
}
simple way to hide the scrollbar