I am facing problem of scroll-x in css
Please find below html code
<div id=main_user_chat_tab_div class="chat-container_div" style="border:4px solid #F00;">
<div id="chat_box_win" class="chat_box_win" style="position:relative;"></div>
<div id="chat_user_rec" style="width:100%; height:20%; border:3px solid #333;overflow-y:hidden;overflow-x:scroll; display:table-row; position:relative;">
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
</div>
</div>
css code:
.chat-container_div {
width: 20.2%;
height:72%;
margin-right:15%;
margin-top:11%;
float:right;
position:relative;
display:none;
}
#user_chat_image {
position:relative;
display:inline;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
bottom:0px;
float:right; margin-right:2%; width:60px; height:60px; display:block;
}
In below screen I want scroll-x when outer div chat_user_rec will full. But in below screen it is not working, overflow div are adding into next row. Please do you have any idea about it. I think something is happing wrong.
If I'm interpreting your question correctly, I believe you should be using white-space: nowrap; on the parent element to get the desired effect. Take a look here: Codepen
I simplified your example a bit. First, the HTML:
<div id=main_user_chat_tab_div class="chat-container_div" style="border:4px solid #F00;">
<div id="chat_box_win" class="chat_box_win" style="position:relative;"></div>
<div id="chat_user_rec" style="width:auto; height:20%;overflow-y:hidden;overflow-x:scroll; display:block; position:relative; white-space: nowrap; text-align: right;">
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
</div>
</div>
And the CSS:
.chat-container_div {
width: 20.2%;
height: 72%;
margin-right: 15%;
margin-top: 11%;
float: right;
position: relative;
}
.user_chat_image {
position: relative;
display: inline-block;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-right: 2%;
width: 60px;
height: 60px;
}
Note: you're using the ID improperly for user_chat_image, so you should switch it over to a class in both the HTML and the CSS, as I have here.
I would also recommend moving all of the styling into the CSS file and out of the HTML.
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
Can somebody help me to understand how to make 6 elements look like on the picture (videos part)?
Here's what I have so far:
.videos {
width: 730px;
height: 400px;
float: left;
margin: 15px 5px 15px 0px;
}
.videos > div {
display: inline-block;
}
#big {
height: 200px;
width: 400px;
background-color: #fff0e0;
}
#small {
height: 90px;
width: 200px;
background-color: #fff0e0;
}
<div class="videos">
<header>
<h2>Videos</h2>
</header>
Browse all videos
<br>
<div id="big">Big video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
</div>
Part of your problem is that widths and heights do not include the sizes of the margins. So if you have, say, a 6 pixel margin between everything, and the bigger rectangle is 200px high, the smaller rectangles need to be 97px high to make everything line up.
Then there's the problem of spaces: with inline-blocks, newlines in the source take up a space horizontally, which throw things out of alignment. I changed the inline-blocks to floats.
And you can't have duplicate ids in a HTML document. I needed to change the ids to classes.
(This doesn't really matter for CSS, but it would be a big problem in other cases, so it's best to play it safe and not have errors.)
You also missed a / in the source; the second <h2> should have been </h2>.
That's about it.
.videos {
width: 630px;
height:400px;
margin: 15px 5px 15px 0px;
}
.videos > div {
float: left;
margin: 0 6px 6px 0;
background-color: #fff0e0;
}
.big {
height: 200px;
width: 400px;
}
.small {
height: 97px;
width: 197px;
}
<div class="videos">
<header>
<h2>Videos</h2>
</header>
Browse all videos
<br>
<div class="big">Big video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
</div>
Simple Example:
HTML
<div id="left-wrapper-lg">
<div class="big-col">
</div>
<div class="small-col">
</div>
<div class="small-col no-margin">
</div>
</div>
<div id="left-wrapper-sm">
<div class="full-col">
</div>
<div class="full-col">
</div>
<div class="full-col">
</div>
</div>
CSS
#left-wrapper-lg {
float:left;
width:64%;
margin-right:2%;
}
#left-wrapper-sm {
float:left;
width:34%;
margin-right:0;
}
.no-margin { margin:0 !important;}
.big-col {
float:left;
width:100%;
margin-right:0%;
}
.small-col {
float:left;
width:48%;
margin-right:2;
}
.full-col {
float:left;
width:100%;
margin:0;
}
Change your css , jsFiddle
.videos {
width: 730px;
height: 400px;
float: left;
margin: 15px 5px 15px 0px;
}
.videos > div {
display: inline-block;
}
#big {
height: 200px;
width: 400px;
background-color: #fff0e0;
float:left;
margin-right:10px;
margin-bottom:10px;
}
#small {
height: 90px;
width: 195px;
background-color: #fff0e0;
margin-bottom:15px;
margin-right:10px;
float:left;
}
So i have 3 box:
Box 1 = red
Box 2 = blue
Box 3 = yellow
Box 1 contains Box 2
Box 2 contains Box 3
Box3 are floated divs and have been cleared using extra div style="clear:both"
I want to have Box 2 as an absolute position to Box 1 like this :
http://i301.photobucket.com/albums/nn42/b1rk0ff/done_zpsd3cd25c0.png
I have tried like this but won't work :
Html :
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Style :
.box1 {
width:300px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
Here's the codepen :
http://codepen.io/anon/pen/Kkirs?editors=110
Anybody could help?
Thank you
what about removing position:relative from .box1, and change position:absolute to .position:relative in .box2
See snipet below, and take a look at the comments in .box2
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Why can't you just set a fixed height for .box1?
.box1 {
width:300px;
background-color: red;
position: relative;
height:250px;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Just replace position: absolute by position: relative.
since box2 is absolute box 1 does not know the height of it's children,
you will need to revert to using both relative elements (or no position definition at all) and solve this problem with margin-left and margin-top
Thank you all, this is what i want.
Hope it helps another newbie like me. :)
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
I'm trying to set up a website to promote myself as a pianist. I'm trying to do this only with html and css, since I don't know anything about javascript/flash etc (YET). I just started html 2 days ago, so this is all new to me.
Here goes: I had this fun idea to put a set of piano-keys on top of the site to function as navigation panel. For now I just have them linked to Google.
Now I have a few questions:
How do I insert text into the divs(keys) nicely, without the divs changing position all the time?
I simply can't work it out.. The key just drops down for some reason.
Am I overlooking a simpler method for positioning all the keys seperately?
I already tried to group them, since C&F are basically the same keys, same goes for Csharp&Fsharp etc.
I decided not to group the keys, so I can easily manage them all seperately.
Any other helpful information is also highly appreciated.
The index file looks as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Thijs Waleson, pianist in Utrecht en omgeving</title>
</head>
<body>
<div class="white-key"ID="C"><p>HOI</p></div>
<div class="black-key"ID="Csharp"></div>
<div class="white-key"ID="D"></div>
<div class="black-key"ID="Dsharp"></div>
<div class="white-key"ID="E"></div>
<div class="white-key"ID="F"></div>
<div class="black-key"ID="Fsharp"></div>
<div class="white-key"ID="G"></div>
<div class="black-key"ID="Gsharp"></div>
<div class="white-key"ID="A"></div>
<div class="black-key"ID="Asharp"></div>
<div class="white-key"ID="B"></div>
<div class="white-key"ID="C"></div>
<div class="black-key"ID="Csharp"></div>
<div class="white-key"ID="D"></div>
<div class="black-key"ID="Dsharp"></div>
<div class="white-key"ID="E"></div>
<div class="footer"></div>
</body>
</html>
And this is what the CSS sheet looks like:
.white-key{
display: inline-block;
border-radius: 5px;
border: 3px solid black;
background: #FFFFFF;
height: 575px;
width: 100px;
margin-left: 0px;
padding: 0px;
z-index: 1;
position: relative;
}
.black-key{
display: inline-block;
border-radius: 5px;
border: 3px solid black;
background-color: #000000;
height:375px;
width: 60px;
vertical-align: top;
margin-left: 0px;
padding: 0px;
z-index: 2;
position: relative;
}
.footer{
background-color: #000000;
height: 3px;
width: auto;
padding: 0px;
margin: 0px;
}
a div:hover{
background-color: grey;
}
/*Positions of the piano keys */
#C {
margin-left: -5px;
}
#Csharp {
margin-left: -50px;
}
#D {
margin-left: -25px;
}
#Dsharp {
margin-left: -25px;
}
#E {
margin-left: -50px;
}
#F {
margin-left: -5px;
}
#Fsharp{
margin-left: -50px;
}
#G{
margin-left: -25px;
}
#Gsharp{
margin-left: -37.5px;
}
#A{
margin-left: -37.5px;
}
#Asharp{
margin-left: -25px;
}
#B{
margin-left: -50px;
}
Having fixed positions for your divs in the form of pixel positions is probably not the best idea. I would suggest you have a look at CSS positioning tutorials like this one for a better idea.
This did the trick, thanks to Stefan Denchev
HTML:
<body>
<div id="menu">
<div class="key white"ID="C">C</div>
<div class="key black"ID="Csharp">C#</div>
<div class="key white"ID="D">D</div>
<div class="key black"ID="Dsharp">D#</div>
<div class="key white nosharp"ID="E">E</div>
<div class="key white"ID="F">F</div>
<div class="key black"ID="Fsharp">F#</div>
<div class="key white"ID="G">G</div>
<div class="key black"ID="Gsharp">G#</div>
<div class="key white"ID="A">A</div>
<div class="key black"ID="Asharp">A#</div>
<div class="key white nosharp"ID="B">B</div>
<div class="key white"ID="C"></div>C
<div class="key black"ID="Csharp">C#</div>
<div class="key white"ID="D">D</div>
<div class="key black"ID="Dsharp">D#</div>
<div class="key white"ID="E">E</div>
<div class="footer"></div>
</div>
</body>
CSS:
.key{
float: left;
border-radius: 5px;
border: 3px solid black;
position: relative;
text-align:center;}
.white{
background: #FFFFFF;
height: 575px;
width: 100px;
z-index: 1;
margin-left: -66px;
left:66px;}
.black{
background-color: #000000;
height:375px;
width: 60px;
z-index: 2;
left:33px;}
.nosharp{
margin-right: 66px;}
body{
width: 1100px;}
.footer{
background-color: #000000;
height: 3px;
width: auto;
padding: 0px;
margin: 0px;}
a div:hover{
background-color: grey;}
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.