there is a tool bar in the left of my page, the width of the tool bar is 35px, the main content panel is in the right of my page and has CSS float:right I want to set the width of main content panel with 100%-35px, so that the tool bar can be displayed, how can I achieve this effect, many thanks.
You can use calc(). But i'm not sure about browser compatibility. So try jquery solution.
Layout should be like this.
<div style="width: 100%">
<div id="toolbar" style="display: inline-block; width: 35px"></div>
<div id="main-content" style="display: inline-block"></div>
<div>
in jquery:
$("#main-content").width($(window).width() - 35);
if there is padding or margin detect them also.
It's convenient to do this by using absolute position. It doesn't need to use javaScript and it handle screen size change event correctly.
the css like bellow:
.toolbar {
position: absolute;
width: 35px;
}
.content {
position: absolute;
left: 35px;
right: 0px;
}
see the demo in jsFiddle.
Pure CSS based approach:
css:
.container {
padding-left: 50px;
border: 1px solid red;
}
.toolbar {
width: 35px;
margin-left: -50px;
padding: 0 5px;
list-style-type: none;
}
.main {
width: 100%;
}
.col {
display: inline-block;
vertical-align: top;
}
html:
<div class="container">
<ul class="toolbar col">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<div class="main col">
<p>This is the place holder for Main Content</p>
</div>
</div>
http://cdpn.io/hlfFG
Sounds like this can easily be done with CSS.
#main-content {
width: 100%;
margin-right: 35px;
}
Related
I have inserted an image into a website and now want to write a paragraph in a new div below it. I noticed that there was extra white space and colored each background of the elements pink & red to understand which was causing a problem. The pink is attributed to div of id="parent", and the red is only attributed to the id="hero_image" contained in the parent div. If it's in the parent, why is the red extending beyond the pink? I'm still trying to grasp position in CSS and what the computer "sees".
Here is an image of what I am seeing.
Here is my html & CSS (the nav styling is missing from CSS bc I checked and removed it to make sure it wasn't the issue)
*{
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'Noto Sans HK', sans-serif;
}
#parent {
position: relative;
width: 100%;
background-color: violet;
height: 70vw;
}
.hero-text {
position: absolute;
text-align: center;
right: 10vw;
top: 28vw;
z-index: 9;
font-size: 3.5vw;
float: right;
color: white;
}
#logo_png {
max-width: 25vw;
position: absolute;
z-index: 100;
}
#hero_img {
max-width: 85vw;
float: right;
top: 0;
z-index: 100;
background-color: tomato;
}
<div id="parent">
<h1>
<a href='THIS WILL BE LINK TO HOME PAGE'>
<img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists"/>
</a>
</h1>
<h1>
<img id="hero_img" src="Images/circle_hands_lbsphoto.png" alt="Little Big Scientists"/>
</h1>
<div class="hero-text">
<p>We’re on a mission to teach,
<br>guide, and empower the next
<br> generation of scientists
</p>
</div>
<!-- Div for Nav Bar-->
<div id="container">
<nav>
<ul>
<li>Mission</li>
<li>About</li>
<li>Events</li>
<li>Donate</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div id="test">
<h2 class="p1">Inspiring Education</h2>
</div>
Your style properties have wrong values !
vh is for height and vw is for width !
anyways , your #hero_img has height : 85vw which is greater than #parent 's height of 70vw.
this should fix the overflow !
#hero_img {
max-width: 25vh;
float: right;
top: 0;
z-index: 100;
background-color: tomato;
}
#parent {
position: relative;
width: 100%;
background-color: violet;
height: 35vh;
}
vh and vw are relative units used to style the element according to the size of the view port !
this article covers more about them and other units too !
I have a created a box where I want to horizontally scroll the content from left to right on mobile and I wanted to swipe using touch and hide the scrollbar, here is a working JSfiddle
Should I try any JSplugin to handle this or is this something doable easily? Please suggest
.spotlight_graphs {
bottom: 30px;
clear: both;
left: 0;
margin-left: auto;
margin-right: auto;
max-width: 360px;
overflow: auto;
position: absolute;
right: 0;
width: 100%;
background-color:#cbcbcb;
overflow:auto;
padding:10px;
}
.spotlight_graphs > ul {
font-size: 0;
list-style: outside none none;
margin: 0;
padding: 0;
text-align:left;
width:200%;
}
.spotlight_graphs > ul > li {
max-width: 90px;
width: 33%;
display:inline-block;
background-color:#dec8c8;
height:100px;
margin:0 5px 5px 0;
border:1px solid #333333;
}
.spotlight_graphs > ul > li > .graph_detail {
color: #404040;
float: left;
font-size: 14px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
<div class="spotlight_graphs">
<ul>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
</ul>
</div>
If you are using webkit browser such as chrome and safari, you could easiy add the following code to your CSS. Demo -> https://jsfiddle.net/xzc7khk0/5/
::-webkit-scrollbar { display: none; }
I think the easiest way to get this is using only CSS and baiscly rotating the items 90deg.
you can find it explained really well here:
Here's a link! where you can find this solution explained really well.
Another solution is to place the div that has the scrollbar into another div that has a height less than the scrolling div and overflow hidden in order to cover the scrollbar like this:
.hideScroll {
height: 129px;
overflow: hidden;
position: relative;
}
I edited your fiddle here: https://jsfiddle.net/xzc7khk0/6
You can do it with CSS as #Stan George said.
But this css is only for mobile, because you want to disappear scrollbar in mobile, so apply css on your scrollable div.
.spotlight_graphs::-webkit-scrollbar{
background-color:transparent;
}
it will disappear the scrollbar not scrolling.
Easy to do with css Webkit
html {
overflow: scroll;
overflow-x: hidden;
}
.spotlight_graphs::-webkit-scrollbar {
width: 0px; //remove scrollbar width
background: transparent; //optional: it will make scrollbar invisible
}
First of all an example:
https://jsfiddle.net/85uqehz5/
The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to overflow: visible the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With overflow:auto; the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.
Example Code:
$('#menu').click(function() {
$('#menu-list').toggleClass('hidden');
});
#wrap {
width: 80%;
height: auto;
overflow: visible;
box-shadow: 0 0 .2rem rgba(0, 0, 0, .4);
}
#content {
width: 200px;
height: 20px;
margin: 0 auto;
}
#content2 {
float: left;
}
.hidden {
display: none;
}
#menu {
position: relative;
height: 20px;
width: 100px;
background-color: #ccc;
float: left;
}
#menu-list {
position: absolute;
top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div id="content">
Some Content
</div>
<div id="content2">
Some Content
</div>
<div id="menu">
Open Menu
<div id="menu-list" class="hidden">
<div> bla </div>
<div> bla </div>
<div> bla </div>
</div>
</div>
</div>
It's very simple, in your specific case:
1- Remove overflow: auto; from #wrap
2- Add this to your CSS:
#wrap:after {
display: table;
content: "";
clear: both;
}
This makes the height of #wrap's calculation include the floated element.
If you have multiple uses declare a class like clearfix and use it whenever needed.
Demo: https://jsfiddle.net/85uqehz5/1/
Floats must be cleared: https://jsfiddle.net/85uqehz5/3/
<div id="wrap" class="clearfix">
The reason the menu is cut off is because you haven't clear your float: left and that is done with such piece of code to the container
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>
You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.
I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}
I need to set the width of a div depending on the page size.
I have three columns. The first and third ones are 50px fixed. I need to set my middle one so it will take all the space with a small margin. I haven't found how to do it in CSS. So I tried using Javascript with window.innerWidth and subtracting the two 50px.
Here is my CSS :
<div class="col1">
...
</div>
<div class="col2">
<div class="col2-1">
...
</div>
<div class="col2-2">
...
</div>
</div>
And the corresponding Javascript
<script type="text/javascript">
setStoreInfoWidth = function () {
$('div.col2-1').css('width', window.innerWidth-100 + 'px')
};
setStoreInfoWidth();
$(window).resize(function () {
setStoreInfoWidth();
});
</script>
Here is a JsFiddle with the code working : http://jsfiddle.net/MrYUb/
However, I can't make it work on my actual website.
Do you have any idea why?
You can use negative margins to create a 3 column layout:
http://jsfiddle.net/teynon/J2mx7/2/
<div class="container">
<div class="leftCol">
Left stuff
</div>
<div class="rightCol">
Right Stuff
</div>
<div class="middleCol">
Middle stuff
</div>
</div>
<div style="background-color: #0000BB; clear: both;">Test</div>
CSS:
.container {
width: 100%;
position: relative;
}
.leftCol {
float: left;
margin-right: -50px;
width: 50px;
left: 0px;
min-height: 100px;
background-color: #FF0000;
}
.rightCol {
width: 50px;
margin-left: -50px;
right: 0px;
min-height: 50px;
background-color: #00FF00;
float: right;
}
.middleCol {
margin: 0px 55px 0px 55px;
background-color: #0000FF;
min-height: 50px;
}
Why not using percent? If you have 2 divs, that 'll make 50% for each.