I'd like to align two divs next to each other, and have them scroll across the screen from right to left. I know how to do this for a single piece of text enclosed in paragraph tags, but would like to do this for the two divs. Is that possible? Thanks.
Check this example code -
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>
<div>
<div style = "float:left">
DIV 1 DATA
</div>
<div style = "float:left">
DIV 2 DATA
</div>
</div>
</marquee>
</body>
</html>
Related
I'm creating a landing page, with an image with text over it.
I have the div that contains the text as a child div to the image div, and the image uses viewport height to fill the whole screen, however as soon as I insert text in the centered child div, for some reason the image gets resized in height, and there's uneeded scrolling space. I have tried different display types, and everything.
I've made an example, one with the div that shows the text and one without
With text and extra scrolling space: http://jsfiddle.net/g7ch1p0j/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
Without text and no scrolling space between the image and content below it: http://jsfiddle.net/sctcebmf/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
You'll see the text moving upwards a little bit (grab the scrollwheel and drag it down slowly) before you see the end of the image (black box) and that's because of the extra issue. This does not appear in the second example.
Got your fiddle working as expected by changing #lander_meta's position to absolute, adding width:100% and making its p tags text-align: center.
Working fiddle.
I am developing a responsive mobile web page using twitter-bootstrap.css and angularjs.
I am trying to accommodate one image and text side by side in a row using float concepts.see screenshots below.
I give width to the image and i didn't give width to the text, as i want the text to take the remaining width left out by the image,
But it is not happening, text comes to the next line instead of wrapping into the available width left out by the image,when the text is more than the width.
Screen shot #1
When text contains within the width left out by the image, when the text content's width is less than available width left out by the image.
(Link to the full image)
Screen shot #2
When text comes to new line instead of wrapping within the width left out by the image, when the text content's width is more than available width left out by the image
(Link to the full image)
Screen shot #3
As i needed, when text comes wraps within the width left out by the image, when the text content's width is more than available width left out by the image. But width is set for text.
(Link to the full image)
My Code is
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<style>
.float-left {float:left !important;}
.clearIt {clear:both !important;}
.marRight5{margin-right:5px}
.BgImg{background: url(images/img.png) no-repeat;height:25px;width:25px}
</style>
<script src="lib/angular/angular.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="BgImg float-left marRight5"></div>
<div class=" float-left">This is test content This is test content This is test content This is test content This is test content</div>
<div class="clear"></div>
</div>
</body>
</html>
Take the float off your text div. Floated elements do not wrap around other floats, they float around them as a block, wrapping to a new line if necessary.
http://jsfiddle.net/isherwood/jP6yd/
<div class="row-fluid">
<div class="BgImg float-left marRight5"></div>
<div>This is test content This is test content This is test content This is test content This is test content</div>
<div class="clear"></div>
</div>
I have two divs one is a picture and the other is text. I am putting these two divs inside a parent div and using as my header. My image is much taller than the text. What I want to do is put the image all the way on the left and the text on the right vertically aligned at the bottom to align with the images bottom. I am having a hard time doing this. Also, I can't use float because when I view the page on a mobile phone because of the width the text breaks to the next line which is fine but using float:right it goes to the right which is not what I want here is what I am trying.
<div id="header" style="overflow:auto"><div style="float:left;">
<img src="Images/crescentlogo.png" /></div>
<div><h4 class="gold">Daily <span class="DarkGreen">EXCEEDING</span> <span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4></div>
</div>
Any ideas?
Thanks,
Heres the code for it:
<!DOCTYPE html>
<html>
<head>
<style>
h4{
display: inline;
}
</style>
</head>
<body><div id="header">
<img src="Images/crescentlogo.png" id="img" />
<div id="text" style="display: inline;"><h4 class="gold">Daily <span
class="DarkGreen">EXCEEDING</span>
<span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4> </div>
</div>
</body>
</html>
Link for JSFiddle: http://jsfiddle.net/w5wCG/1/
Give float:left to img and also give float:left to div, it will place side by side
img div {
float:left; }
I have a couple other pages on the website that have no problems with resizing to height using overflow auto.
The thing I have noticed is the pages work fine with one div. The page that is not working has two or more div and also I have tried it with a container but I still get the vertical and horizontal scroll bars.
<div class="content">
<div class="container">
<div class="a">
<div class="left">List Items</div>
<div class="right">List Items</div>
</div>
<div class="b">
This div is a FORM.
</div>
</div>
</div>
When a css works in other browsers but not in IE9, chance is that your header isn't correct. Check with this one :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
made an IE only style sheet and changed the .content to overflow: hidden. also took the width off of a couple of classes to make the content fit correctly as it does already in other browsers.
I'm stumped. I've got a paragraph on my page that, when clicked, causes some nearby text to shift up when I browse the page with IE8. I've stripped everything out to get a good repro. In my repro case it's actually worse. If I click some other text it will cause the text to shift back down.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>IE8 text shift</title>
</head>
<body>
<div style="margin: 100px 0;">margin</div>
<div style="width:32px; height:32px; float:left; background: Yellow;">float</div>
<div>
<!-- This HTML comes from an external system. I cannot remove -->
<!-- the <div style="clear:both;"></div>, which is always included. -->
<p>Click on this first paragraph and the "abc" text jumps up.</p>
<p>Click on this second paragraph and the "abc" text jumps down.</p>
<div style="clear:both;"></div>
<!-- End External HTML -->
</div>
<div>abc</div>
</body>
</html>
I'd happily delete the <div style="clear:both;"></div> except that it is out of my control. Everything outside the area indicated by comments is in my control.
Works fine in chrome and firefox.
Edit: It seems I was wrong about the first paragraph needing to be long. In fact, if it is too long, I lose my repro. I've updated my repro to use a shorter first paragraph.
Edit: It has something to do with the top div's margin. If I add more paragraphs, the shift goes away. But if I then increase the margin on that div, the shift returns.
Update: I confirmed this does not repro in actual ie 8 (had to use my old XP computer). This is an IE9 in IE8 mode issue only. Also, I figured out I am able to fix it by adding style="overflow: hidden; to the parent div of the paragraphs.
This issue is specific to IE9-in-IE8-mode. The solution is to hide the overflow of the parent div.
<body>
<div style="margin: 100px 0;">margin</div>
<div style="width:32px; height:32px; float:left; background: Yellow;">float</div>
<div style="overflow: hidden">
<p>Click on this first paragraph and the "abc" text no longer jumps up.</p>
<p>Click on this second paragraph and the "abc" text no longer jumps down.</p>
<div style="clear:both;"></div>
</div>
<div>abc</div>
</body>