I need that this two divs look like one row of table , but thay don't show one beside other . Any help ?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Info-Stanković Inženjering</title>
<style type="text/css">
div#wrapper{
width:1004px;
width:602px;
margin-left: auto;
margin-right: auto;
}
div#left{
border-bottom: 1px solid #606060;
border-left: 1px solid #606060;
border-top:1px solid #606060;
width:640px;
height:600px;
min-width: 640px;
min-height: 600px;
}
div#right{
border-bottom: 1px dashed #FF2A2A;
border-left: 1px dashed #FF2A2A;
border-right: 1px dashed #FF2A2A;
border-top:1px dashed #FF2A2A;
margin-left:643px;
width:360px;
min-width:360px;
height: 600px;
min-height: 600px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
</html>
try setting overflow: auto on #wrapper
To find out why, look at the answers to my question here:
Why does setting overflow alter layout of child elements?
The float:left should be on div#left not div#right
div#left still need "float:left", because div tag is a block element, it does not allow other element around it.
Related
I am very new to CSS.
I have some wishes for scrollbars.
In my example (see code below) I have two independent blocks side by side.
Think of the rectangles as being images.
So far I have got:
I have got a vertical scrollbar for the left pink rectangles in block (“navigation”).
I have got a horizontal scrollbar at the bottom of the page window (which is good) for the large cyan rectangle in block (“content”). But it does not work good, cannot scroll to the right side of the cyan image.
Tested in Chrome and IE.
Here is an image of the html page at http://arxfoto.se/ScrollbarTest.html
(see http://arxfoto.se/scrollbartest.jpg).
I would like to have a horizontal scrollbar for the left pink “navigation” block at the bottom of the page window.
I would like to have a vertical scrollbar for the cyan “content” block, at the right edge of the page window. Hm, I just noticed that the scroll wheel on the mouse performs this vertical scrolling! But that is a bit hidden..?
I would like to have a better horizontal scrollbar for the “content” block.
.
Is this at all possible in CSS?
.
Any help is very much appreciated!!
.
Code (see http://arxfoto.se/ScrollbarTest.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scrollbar test</title>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0 10px 0 10px;
height:100%;
overflow: auto;
}
#content {
margin:0px 0px 0px 210px;
display:block;
background:white;
height: 100%;
width: 100%;
border:1px solid #888;
position:fixed;
overflow: auto;
}
#navigation {
margin: 0px 0px 0px 10px;
display:block;
background:lightgrey;
padding: 10px;
padding-right: 25px;
top:0px;
left:0px;
width:170px;
height: 100%;
border:1px solid #888;
position:fixed;
overflow: auto;
}
* html #content {position:absolute;}
</style>
</head>
<body>
<div id="navigation">
<div style="width:170px;height:100px;border:1px solid #000;background:pink;">
Vertical scrollbar!<br> Wanted:<br> Horizontal scrollbar
<br> at the bottom<br> of browser window</div><br>
<div style="width:250px;height:100px;border:1px solid #000;background:pink;"><br>
A wider image.</div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;">
<br> Last image.</div><br>
</div>
<div id="content">
<div style="width:1500px;height:1000px;border:1px solid #000;background:cyan;">
<br> This is a large image.
<br> Wanted:
<br> Vertical and (better) horizontal scrollbar for this block,
on the edges of the browser window.
<br><br>
<h1>
1
2
3
4
5
6
7
8
9
10
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br<br><br><br><br><br><br>
<br><br<br><br><br><br><br><br><br><br><br<br><br><br><br><br><br><br><br><br<br><br><br><br><br>
<h1> Bottom of image</h1>
</div>
</body>
</html>
You need to add overflow attribute to both the div like this:
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
height: 100vh
}
#navigation {
margin: 0px 0px 0px 0px;
background:lightgrey;
width:25%;
height: 100%;
float: left;
border:1px solid #888;
overflow-x: scroll;
overflow-y: scroll;
}
#content {
margin:0px 0px 0px 0px;
background:white;
width: 74%;
height: 100%;
float: left;
border:1px solid #888;
overflow-x: scroll;
overflow-y: scroll;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.6);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,0.6);
}
</style>
Link for HTML Page - https://68wgy.csb.app/
I have problem that I am using after property for making an arrow for tooltip. When I set its(arrow) position absolute its position changes according to the position of body not main div. For example when I set position of arrow to left:100% it goes to the left side of body, it creates problem for me.When I set its position relative to left:100% it goes to the left of main div but loses its actual shapeProblem: How should I set the position of arrow that it remains in its actual shape and its position sets to the left side of main div?Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToolTip</title>
<style>
#mainDiv{
width: 300px;
height: 150px;
border: 1px solid pink;
background:pink;
margin-right: auto;
margin-left: auto;
margin-top: 15em;
}
#mainDiv:after{
content: '';
position: relative;
border-top: 10px solid green;
border-right: 10px solid blueviolet;
border-bottom: 10px solid yellow;
border-left: 10px solid red;
width:0px;
height: 0px;
left: 98%;
top: 50%;
}
</style>
</head>
<body>
<div id="mainDiv">
</div>
</body>
You'll want to add position:relative; to #mainDiv and position:absolute; to #mainDiv:after.
This question already has answers here:
Why does an inline-block align to top if it has no content?
(2 answers)
Closed 8 years ago.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
height: 400px;
min-width: 200px;
display: inline-block;
border: 1px solid grey;
}
.item{
border: 1px solid grey;
margin: 5px;
}
</style>
</head>
<body>
<div class="container"><div class="item" style="display: none;">123</div></div>
<div class="container"><div class="item">123</div></div>
<div class="container"><div class="item">123</div></div>
</body>
</html>
the problem is when i add style="display: none;" to the first item, the containers not display inline. when i remove display:none , it's ok .
anyone could tell me why ?
You can change display:none to visibility:hidden, and it works.
This may class as a solution: HERE - the default alignment is baseline, and without any content in the div, there is no baseline. If you add vertical-align:top, you overcome this. That's why my 'solution' above works - visibility:hidden leaves the element inline - whereas display:none takes it out of the flow.
Actually, I do not know the exact answer, but I can provide you a solution:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
height: 400px;
min-width: 100px;
display: inline-block;
border: 1px solid grey;
}
.item{
border: 1px solid grey;
margin: 5px;
position: absolute;
}
</style>
</head>
<body>
<div class="container"><div class="item" style="display: none;">123</div></div>
<div class="container"><div class="item">123</div></div>
<div class="container"><div class="item">123</div></div>
</body>
</html>
try
.item{
border: 1px solid grey;
margin: 5px;
}
to:
.item{
border: 1px solid grey;
margin: 5px;
float:left
}
http://jsfiddle.net/djrr93wq/
I'm working on a map project and for some reason my tooltip's text width will continue to expand as wide as I want until I add a space to my text. If I add a space, it breaks to the next line; what is going on and how do I fix this? I'd like the text on one line without specifying a width so it can automatically set the width, how can I fix this?
In the example below, look at text "Baseball Fields" in the paragraph tag. If it reads "BaseballFields" it will stay on one line. But as soon as I add the space, it will line break.
<div style="width: 750px; height: 1221px; border: 0; padding: 0; margin-top: 10px; display: block; position:relative; background: url('http://www.thefirstacademy.org/filerequest/9701.jpg') no-repeat left top;">
<style type="text/css">
.triangle {
position:absolute;
bottom:-5px;
left:40%;
height:0;
width:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid white;
}
.tooltip {
color:#ef4c4c;
background:#ffffff;
padding:17 10;
display:block;
position:absolute;
border-radius:5px;
font:.8em 'MuseoSans-500','Museo Sans';
top:-40px;
box-shadow:0px 3px 3px #000;
border:1px solid #000;
}
</style>
<div class="marker" style="position:absolute;cursor:pointer;left:450px;top:75px;" id="baseball">
<img src="http://www.thefirstacademy.org/filerequest/9702.png" alt="Location Marker" />
<div class="tooltip" >
<div class="triangle"></div>
<p style="padding:0;margin:0;line-height:0;display:block;">Baseball Fields</p>
</div>
</div>
</div>
Just a heads up: in addition to white-space: nowrap; it can be helpful to include display: inline-block; for browser compatibility purposes
I have a header logo where I'm adding one more image on the left of this logo.
I have used margin-left property and works perfectly across all major browsers except IE6.
As a bit of a research I used position:relativeproperty to fix this negative value.
But no luck. Here's the code I used.
in the <body> section I'm using this
<div id="logo">
<span style="position:relative;margin-left:-400px"><img src="image path"/>
</span>
</div>
now the DIV id="logo"
has following css styles
#logo {
background: url("../images/logo.jpg") repeat scroll 0 0 transparent;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
The following code works well on my IETester - IE6 mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#logo {
background: url("logo.png") repeat scroll 0 0 #EEE;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-400px;
background:blue;
}
</style>
</head>
<body>
<div id="logo">
<span><img src="logo.png" alt="" />
</span>
</div>
</body>
</html>
P.S. maybe you should use something like this:
<div id="logo-wrapper">
<div id="logo" style="float:right;"></div>
<div style="float:right;"><img src="logo.png" /></div>
</div>
If an element has floating, in this case IE6 doubles the margin value. So if you want to move 400px to left, you should separately for IE6 write margin-left: -200px
#logo{position:relative}
span {position:absolute:left:-400px}
Yes IE6 does not support negative margin-padding values so you can play with positioning with the use left right position negative or positive for getting your desired results......
like this:-
HTML
<div id="logo">
<span>span</span>
</div>
CSS
#logo {
background: red;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-200px;
background:yellow;
width:50px;
height:50px;
}
You can try using position:relative with the left or the right attributes to position it in the right place. Or write specific styles for IE browser.
.header{
position:relative;
left: -200px;
}