This is my html and css:
I want display 3 div on 1 line:
i set height of div = 300px
at div 2 i set height:1500px, but it auto expand div and not display scroll:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.mainContent {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.col {
display: table-cell;
width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
</style>
</head>
<body>
<div class="mainContent">
<div class="col">
part 1
</div>
<div class="col">
part 2
<div id="resultTable" style="height:1500px;">
</div>
</div>
<div class="col">
part 3
</div>
</div>
</body>
</html>
Why can't display scroll of div?
I think the issue is you're using table layout. If you set your column divs to display:block, and float:left; then you'll get the ability to scroll back.
<style>
.mainContent {
display: block;
width: 100%; /*Optional*/
}
.col {
display: block;
float:left;
width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
</style>
Try using Flex layout.
.mainContent {
display: flex;
flex-direction: row;
border-spacing: 10px; /*Optional*/
}
.col {
min-width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
<div class="mainContent">
<div class="col">part 1</div>
<div class="col">part 2
<div id="resultTable" style="height:1500px;">
</div>
</div>
<div class="col">
part 3
</div>
</div>
Related
As show in below sample prototype ,I am trying to create a side navigation bar that shows images initially and when hover on the side navigation bar, the Navigation bar expands and a labels that shows description of image appears. It works well for me. I achieved this side navigation bar expansion and reduction using the concept of flex-grow property (you can check it in my code snippet to understand better what i am saying...). but my problem is that when hover the side navigation bar , the image tag moves right side to give space for label tag that appearing dynamically(when hovering side bar).
so how can I keep image at center while label tag appearing in side navigation bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar</title>
<style>
*{padding: 0px;margin: 0px;box-sizing: border-box;}
body{position:relative;height: 100vh;width: 100vw;}
.container{position: relative;height:100%;width: 100%;display: flex;flex-direction: column;}
.topcontainer{position: relative;width:100%;height: 75px;background-color: aqua;}
.bottomcontainer{position: relative;width: 100%;height: 30px;border:1px solid salmon;}
.middlecontainer{position: relative;width: 100%;height: auto;flex-grow: 1;border: 1px solid black;display: flex;}
.rightsidenavbar{position: relative;width:auto;min-width: 75px;height:99%;border: 1px solid blue;display: flex;flex-direction: column;justify-content:flex-start;align-items: center;gap:10px;}
.servicescontaienrtab{position: relative;min-width: 75px;height: auto;display: flex;justify-content:center;align-items: center;min-height: 40px;}
.servicetabinnerCont{position:relative;width: auto;height: auto;display: flex;justify-content: flex-start;align-items: center;}
img{height:35px; width: 35px;}
.lableCls{display: none;}
.mainservicecontainer{position:relative;height:99%;flex-grow: 1;width:80%;border:1px solid yellow;}
</style>
</head>
<body>
<div class="container">
<div class="topcontainer">
</div>
<div class="middlecontainer">
<div class="rightsidenavbar" onmouseover="displayLabel()" onmouseout="hideLabel()">
<div class="servicescontaienrtab">
<div class="servicetabinnerCont">
<img src="https://cdn-icons-png.flaticon.com/128/7910/7910833.png" alt="imagesrc not loaded">
<label for="" class="lableCls">Free Service</label>
</div>
</div>
<div class="servicescontaienrtab">
<div class="servicetabinnerCont">
<img src="https://cdn-icons-png.flaticon.com/128/7910/7910868.png" alt="imagesrc not loaded">
<label for="" class="lableCls">Shopping girl</label>
</div>
</div>
</div>
<div class="mainservicecontainer"></div>
</div>
<div class="bottomcontainer">
</div>
</div>
<script>
const labelElement= document.querySelectorAll(".lableCls");
function displayLabel(){
for(i=0; i<labelElement.length;i++){
labelElement[i].style.display = "block";
}
}
function hideLabel(){
for(i=0;i<labelElement.length;i++){
labelElement[i].style.display="none";
}
}
</script>
</body>
</html>
You don't need JavaScript to show/hide something on hover.
I just removed JS hover functional and use CSS instead.
Then I don't use CSS flex to center icon because you want to keep it center and stay in the same place (+with text expand to the right) when hover. So, I use calculated position (calc()) of margin instead.
Here is the code.
// I just unfunction them you may remove it later because these are no need.
const labelElement = document.querySelectorAll(".lableCls");
function displayLabel() {
for (i = 0; i < labelElement.length; i++) {
//labelElement[i].style.display = "block";// no need, can be removed
}
}
function hideLabel() {
for (i = 0; i < labelElement.length; i++) {
//labelElement[i].style.display = "none";// no need, can be removed
}
}
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
position: relative;
height: 100vh;
width: 100vw;
}
.container {
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.topcontainer {
position: relative;
width: 100%;
height: 75px;
background-color: aqua;
}
.bottomcontainer {
position: relative;
width: 100%;
height: 30px;
border: 1px solid salmon;
}
.middlecontainer {
position: relative;
width: 100%;
height: auto;
flex-grow: 1;
border: 1px solid black;
display: flex;
}
.rightsidenavbar {
position: relative;
width: auto;
min-width: 75px;
height: 99%;
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.rightsidenavbar:hover .lableCls {
display: block;
}
.rightsidenavbar:hover .servicetabinnerCont {
margin-right: calc((75px / 2) - (35px / 2));/* 75 is column width; 35 is icon width. (add this to beautify left and right spacing.) */
}
.servicescontaienrtab {
position: relative;
min-width: 75px;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;
min-height: 40px;
width: 100%;
}
.servicetabinnerCont {
position: relative;
width: auto;
height: auto;
display: flex;
align-items: center;
margin-left: calc((75px / 2) - (35px / 2));/* 75 is column width; 35 is icon width. */
}
img {
height: 35px;
width: 35px;
}
.lableCls {
display: none;
word-wrap: nowrap;
}
.mainservicecontainer {
position: relative;
height: 99%;
flex-grow: 1;
width: 80%;
border: 1px solid yellow;
}
<div class="container">
<div class="topcontainer">
</div>
<div class="middlecontainer">
<div class="rightsidenavbar">
<div class="servicescontaienrtab">
<div class="servicetabinnerCont">
<img src="https://cdn-icons-png.flaticon.com/128/7910/7910833.png" alt="imagesrc not loaded">
<label for="" class="lableCls">Free Service</label>
</div>
</div>
<div class="servicescontaienrtab">
<div class="servicetabinnerCont">
<img src="https://cdn-icons-png.flaticon.com/128/7910/7910868.png" alt="imagesrc not loaded">
<label for="" class="lableCls">Shopping girl</label>
</div>
</div>
</div>
<div class="mainservicecontainer"></div>
</div>
<div class="bottomcontainer">
</div>
</div>
Why margin-right is not working with last container element which parent have display:flex property?
For example:
<!doctype html>
<body>
<div style = " display: flex; border: 1px solid black; width: 300px; height: 400px;overflow-x: auto;" >
<img style = " display: block; float:left; width: 400px; height: 100px;margin-right: 10px;" src="images.jpg">
<img style = " display: block; float:left; width: 400px; height: 100px; margin-right: 10px;" src="images.jpg">
</div>
Jsfiddle Jsfiddle
Something like this should work. Note the width property values, your mileage with it may vary.
* {
box-sizing: border-box;
}
#parent {
overflow: auto;
width: 400px;
}
#inner {
display: flex;
border: 1px solid;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
width: max-content;
}
img {
display: block;
margin-right: 10px;
}
<div id="parent">
<div id="inner">
<img src="https://picsum.photos/200?random=1" />
<img src="https://picsum.photos/200?random=2" />
<img src="https://picsum.photos/200?random=3" />
</div>
</div>
I removed all inline CSS. And I am bringing all the images under one class.
And of course, I removed float CSS because of flex. I use a CSS property gap for space between images.
Try this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test </title>
</head>
<style>
.container {
display: flex;
border: 1px solid black;
gap: 20px;
padding: 20px;
}
.container img {
border: 1px solid red;
width: 400px;
height: 100px;
}
</style>
<body>
<div class="container">
<img src="https://image.shutterstock.com/image-vector/low-quality-stamp-sticker-seal-260nw-575960896.jpg">
<img src="https://image.shutterstock.com/image-vector/low-quality-stamp-sticker-seal-260nw-575960896.jpg">
<img src="https://image.shutterstock.com/image-vector/low-quality-stamp-sticker-seal-260nw-575960896.jpg">
</div>
</body>
</html>
I have a html structure like this and some basic style
.container {
display: block;
width: auto;
/* this is must */
height: auto;
/* this is must */
max-width: 300px;
}
.container .row {
display: flex;
width: 100%;
height: auto;
}
.container .row .left {
display: inline-block;
width: 100px;
height: auto;
}
.container .row .right {
display: inline-block;
width: auto;
height: auto;
}
<div class="container">
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
The style may not working, I only pasted the basic part of it.
What I want to achieve is, the parent element has a max-width, it contains multiple rows, each row has two elements, 'left' and 'right'. I give a fixed width to 'left' element, and a min-width/max-width to 'right' element. I would like the width of the right element auto grow as the content grow until the max-width, but if the content is short, the right element shall also shrink.
I tried table and flex box, but no luck. Thanks for any help
The problem is because you have to specify the max-width to the .right class.
1) The overall container's max-width:300px and left one's width: is 100px, so the remaining 200px; you can give it to right row.
2) Have added background for better understanding.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.container {
display: block;
width: auto; /* this is must */
height: auto; /* this is must */
max-width: 300px;
}
.container .row{
display: flex;
width: 100%;
height: auto;
background-color:Red;
}
.container .row .left{
display: inline-block;
width: 100px;
background-color:yellow;
}
.container .row .right{
display: inline-block;
height: auto;
background-color:green;
max-width: 200px;
overflow:hidden;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="left">qweqweqwe</div>
<div class="right">qweqweqwew<p>afdllssssssssdddddddddssssssssss</p><p>asdasdasdadsas</p></div>
</div>
<div class="row">
<div class="left">qweqweqwe</div>
<div class="right">qweqweqwe</div>
</div>
<div class="row">
<div class="left">qweqweqw</div>
<div class="right">qweqweqweqwe</div>
</div>
</div>
</body>
</html>
Find the codepen sample here and check it with your requirement. Also, let me know if there is something that you want to get from.
.container .row{
display: flex;
width: 100%;
height: auto;
}
.container .row .left{
display: inline-block;
width: 100px;
height: auto;
}
.container .row .right{
display: inline-block;
width: auto;
height: auto;
max-width: 150px;
overflow: hidden;
}
Add display: flex to your .row class and set min-width: 100px to .right - see a working jsfiddle here: https://jsfiddle.net/o3o9j4za/1/
<div class="container">
<div class="row">
<div class="left">1234</div>
<div class="right">4312</div>
</div>
<div class="row">
<div class="left">1235</div>
<div class="right">qweqwereqwr</div>
</div>
<div class="row">
<div class="left">5342</div>
<div class="right">3g43g3g3g</div>
</div>
.container {
display: block;
width: auto; /* this is must */
height: auto; /* this is must */
max-width: 300px;
}
.container .row{
width: 100%;
height: auto;
display:flex;
}
.container .row .left{
display: inline-block;
height: auto;
width: 100px;
background-color:#ff0;
}
.container .row .right{
display: inline-block;
width: auto;
min-width: 100px;
height: auto;
background-color:#f0f;
}
Note, that your flex container (.row) is affected by the max-width of .container.
(Edit: misread a bit - should be like you want it now?)
How about this flexbox solution? I think it comes closest to what you are looking for:
<div class="container">
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
</div>
.container {
padding: 2px;
border: 1px solid green;
max-width: 300px;
}
.row {
display: flex;
padding: 2px;
border: 1px solid red;
max-width: 300px;
}
.left {
padding: 2px;
border: 1px solid blue;
width: 100px;
}
.right {
padding: 2px;
border: 1px solid purple;
width: 180px;
}
And the fiddle:
https://jsfiddle.net/xr7ebmsz/
I guess you can try this one for your class "right"
.right{
width:calc(100% - 100px);
}
I would like to write a CSS script that involves 4 div in addition to a fifth div as a container.
The Div 1 should be at the top as a title, Div 2 should be at the center of the right side of the container ,Div 4(Containing img src) should be at the center of the container , and Div 3 should be at the bottom of the image.
I had a script as a trial but it not like that I want( Iam beginner in CSS) .
<html xmlns="http://www.w3.org/1999/html">
<head>
<title> </title>
<meta charset="utf-8">
<style>
#siena img {
display: inline-block;
margin-left: 0px;
}
#Container
{
margin-bottom: 3pc;
text-align: center;
border-width:2px;
border-color: #46b8da ;
margin-right: 100px;
margin-left: 100px;
border-style: solid;
background-color :#c4e3f3;
padding :10%;
}
#link
{
display: inline-block;
}
#price
{
top:100px;
width:50%
margin:0 auto;
float:right;
}
</style>
</head>
<body>
<meta charset="utf-8">
<h1 style="text-align: center;"> Text </h1>
<div id="Container" > <p>
<div id="siena" >
Text
<img src='http://www.traidnt.net/vb/attachments/480574d1272729780-no_pic.gif'>
<div id="price" >
price
</div>
</div>
<div id="link" >
<a href='https://www.google.com/?gws_rd=ssl' > </a>
</div>
</div>
</body>
</html>
Your markup looks invalid.
You have unecessary spaces within tags and unclosed p tags.
You can achieve what you want via this markup:
<div id="container">
<div id="header">Div 1</div>
<div id="content">Div 4</div>
<div id="side-content">Div 2</div>
<div id="footer">Div 3</div>
</div>
And then use CSS to position the elements:
#container {
width: 100%;
}
div {
border: 1pt solid black;
padding: 5px;
text-align: center;
}
#content {
width: 70%;
float: left;
}
http://jsfiddle.net/7dqagh7s/
Also, I would recommend using a StyleSheet rather than putting the code directly inline with the markup.
I tried to copy the image in css
.container{
width: 90%;
border: 1px solid brown;
height: 500px;
}
.top, .bottom{
margin-top: 10px;
width: 90%;
height: 100px;
border: 3px solid red;
margin-bottom: 10px;
}
.left, .right{
display: inline-block;
width: 50%;
border: 3px solid maroon;
height: 200px;
}
.right{
display: inline-block;
width: 40%;
margin-left: 5%;
}
<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom">bottom</div>
</div>
Edit since you asked about the image overlapping another div.
The following will make it so the image will not extend past it's container so the image wont overlap any other div.
.left img{
width: 100%;
max-width: 100%;
max-height: 100%;
}
Is that what you meant?
HTML
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right"></div>
</div>
CSS
.container {
background-color: #000;
margin: 130px auto;
min-height: 320px;
width: 940px;
overflow: auto;
padding: 0px 10px;
}
.left {
width: 600px;
margin-right: 20px;
float: left;
}
.right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: blue;
float: right;
}
.panel {
background-color: red;
}
Question:
How can I add another div that I can place under div.right? The div that I want to place under .right will be .under_right and the CSS is:
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: gold;
}
http://jsfiddle.net/daQ22/2/
Add:
clear:both;
float:right;
to under_right
Working DEMO
Add a div in html like this:
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right">Blue</div>
<div class="new_div">New</div> <-- Added this new div here
</div>
and use this CSS:
.new_div { background-color: white; width:320px; float: right; }
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right"></div>
<div class="underright"></div>
</div>
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: gold;
float: right;
}
As long as the div .underright is underneath div .right, the float will obey that structure.
Edit Just a quick note, perhaps adding display: block; to the css will help, especially if you change the size of the outer container.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
.container {
background-color: #000;
margin: 130px auto;
min-height: 320px;
width: 940px;
overflow: auto;
padding: 0px 10px;
}
.left {
width: 600px;
margin-right: 20px;
float: left;
}
.right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: blue;
float: right;
}
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
margin-top:30px;
background-color: gold;
}
.panel {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right">
<div class="under_right">It is under right.</div>
</div>
</div>
</body>
</html>