I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
<style type="text/css">
.mydiv {
width:300px;float:left;background-color:#ff0000;height:250px;margin-right:10px
}
</style>
</head>
<body>
<div style="margin-left:auto;margin-right:auto;width:1000px;clear:both">
<div style="margin-right:auto;margin-left:auto;text-align:center;margin-top:5px;">This is the title</div>
</div>
<div style="margin-right:auto;margin-left:auto;clear:both;width:1000px;margin-top:10px">
<div class="mydiv">Div</div>
<div class="mydiv">Div</div>
<div class="mydiv">Div</div>
</div>
</body>
</html>
The problem is that the second and the third divs do not align properly (horizontally) with the first. For some reasons, a vertical offset makes the second and the third div appear a little lower than the first. Why is this?
Thankyou
PS
I am using Chrome 25, on MacOS X. Hope it helps somehow.
Its because you have clear: both; on the parent container of the three red boxes, if you remove that property all three will be aligned as expected.
You need to include the clear property after the last floated closing </div> or you can use a clearfix which uses the ::after pseudo-element on the container to clear floated elements within it.
You can see the container now respects the floated red boxes ..
jsBIN
Randomly poking around tells me the way to fix the offset is to remove the clear: both; declaration from the parent <div> of the three floated <div>s:
<div style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
</div>
To make the parent <div> "wrap around" the floated <div>s, you need to add a cleared <div> after the floated ones:
<div style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
<div style="clear: both;" />
</div>
You can also use a "clearfix" (for instance the one from HTML 5 Boilerplate on the containing <div> instead:
<div class="clearfix" style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
</div>
Related
I'm trying to create a simple HTML document that has two main divs - the first one has a background image w/a background size of cover so that the image takes up the entire top portion of the screen, the second div is directly beneath the first div and contains an img tag.
This seems simple enough, but when I apply a background:url style to my first div, scrolling down causes my second div image to overlap the background image of the first div. I expected this so I set a height property in my first div and this has no effect.
How do I make the first image cover the first div but not have the second one overlap it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="font-family: 'lato'; font-size:18px;">
<div class="container-fluid">
<div style="background:url('http://www.screensavergift.com/wp-content/uploads/2011/01/BeautifulLakeView1.jpg') no-repeat center center fixed; background-size:cover; height:1100px" class="row">
<div class="row">
<div style="margin-top:20px" class="text-right col-xs-offset-1 col-xs-10">
Login | Sign Up
</div>
</div>
<div class="row">
<div style="background-color:rgba(62,83,78,0.2); margin-top:10px" class="text-center col-xs-offset-1 col-xs-10">
<span style="color:white; font-size:40px;">
Join us in God's country!
</span>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<img src="http://www.ynaija.com/wp-content/uploads/2014/05/Bird.jpg" alt="Cyrillic alphabet" />
</div>
</div>
</div>
</body>
</html>
See an example of what I'm trying to do here:
http://jsfiddle.net/y0oL6k4d/
I need to move the red circle image to the position shown as in below photo:
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>領収書</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
{% if receipt %}
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<h2>領収書
</h2>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3 col-xs-offset-3">
<h5>No. {{receipt['receipt_number']}}</h5>
<h5>{{receipt['date']}}</h5>
<hr/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 text-center">
<h3>{{receipt['c_name']}} 様</h3>
<hr/>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 text-center">
<h3><b>￥ {{receipt['amount']}}</b><br/>
</h3>
<hr/>
<h3>
但 {{receipt['quantity']}} {{receipt['product']}}<br/>
</h3>
<h4>
上記正に領収いたしました
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-center col-xs-offset-6">
<h5>xxxxxxxxxxxxxxxxxxxxxxxxxx</h5>
<h5>xxxxxxxxxxxxxxxxxxxxxxx</h5>
<img src='inkan.PNG'/>
</div>
</div>
</div>
{% endif %}
<!-- /container -->
</body>
</html>
Could anybody tell me how to do it?
Just add these style to your img and play with "right" value;
<img src='inkan.PNG' style="position: absolute; right: 200px;"/>
Just add the image as a background, like this:
<div class="col-xs-6 text-center col-xs-offset-6" style="background:url(urlhere) no-repeat">
Refer to this link for more info.
Give the div an id and then add it ad css property background: url({url}); like so:
HTML:
<div id="myDiv"></div>
CSS:
#myDiv {
background: url({url});
}
Include that CSS code either from a separate file or in <style/> tags.
I also recommend you try the web course on CodeCademy to learn most of everything you need to know about HTML & CSS.
If you would use a Background, it wouldn't be printed by some Browsers.
Best way to solve this is that you use relative (or absolute) Positioning on the Image Element.
But you must fix a little thing on the col- divs from Bootstrap. Basically they don't have any position Attribute, so you can't really use the position Attribute on the child elements.
So first, let's fix the positioning Inheritance problem:
.row > div { position:relative; }
Go for this CSS Rule as example to have it relative, you may use also position: absolute and or additionally float:right, but I think this should be fine, depends on your content. I've used 100px for your Image as example size, change this as you need.
.inkan_image { position:relative; top:0px; right:0px; width:100px; height:100px }
In Your HTML you just need to add your class to the Image.
By the way: I would position the Image as first element in your Content, as it will float or will be positioned on the right side and the content just swaps in then.
<img src='inkan.jpg' class='inkan_image'>
I have a webpage I made here: http://jsfiddle.net/KM9HJ/
<!DOCTYPE html />
<head>
<title>Home</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<img style="width:50; height:50; float:left;" src="Content/Portal%20Layered.png"/>
<img style="width:50; height:50; position:relative; left:-50px; z-index:2;" src="Content/Blank.png"/>
<div><h2 id="headerh2">Cody Shearer</h2></div>
</div>
<div id="wrapper">
<div style="background-color:#565656">
<div id="links">HOME</div>
<div id="links">ABOUT ME</div>
<div id="links">GALLERY</div>
</div>
<article id="para">
<p>About This Website</p>
<div id="paraL2"><p>About this page:</p> <div id="paraP">This is</div></div></article>
</div>
</body>
If you look at the div that says "About this page:" you will see that it is positioned to the far right of the div and part of it is cut off (you may have to resize the result area to see this). What I want the words to do is to stay on one line and be aligned to the left. From what I have seen the issue can be fixed by removing the "float:left" from the #links area, or It can be helped a little by removing the "width: 150px;" from #link. The only issue is that I spent a long time trying to get other s
adding clear:left may help you.
#para {
clear:left;
....
need your help. I created a div that contains 2 floating DIVs. The first Div would be the leftnav. The second Div contains 2 floating DIVs too. The problem #container div height set to auto but not seem to work.
here: jsfiddle
I tried the clear:both at the end of the second div, but it didn't work.
Any help would be appreciated. Thanks
<div id="header">header</div>
<div id="container">
<div id="first">first</div>
<div id="second">
<div id="scol1">
<div id="scol1a">scol1a</div>
<div id="scol1b">scol1b</div>
<div id="scol1c">scol1c</div>
</div>
<div id="scol2">
<div id="scol2a">scol2a</div>
<div id="scol2b">scol2b</div>
<div id="scol2c">scol2c</div>
</div>
</div><!--SECOND DIV-->
<br style="clear: both;" />
</div> <!--CONTAINER DIV-->
<div id="footer">footer</div>
change scol1 height to auto as well. http://jsfiddle.net/Y47sx/31/
You have given 100px height to scol1a, scol1b, scol1c. This causes container having problem. To solve this you should define your #container height: 306px; (100+100+100+6)= 306px. 6px for border.
See this Demo
Note: I have removed <br style="clear: both;" />
In stand of <br style="clear: both;" /> use <div style="clear:both; float:none;"></div> and remove height of <div id="scol1"></div> <div id="scol2"></div>
I'm having problems getting several divs to function as two columns. In the code below I want the container (or content) and right to act as two columns.
Both need borders (non-image) where the border in between both should be the same visual width as the outer borders.
Both columns need to have the same height between top and bottom
right should be fixed size
Is this even possible without changing the HTML?
Take the following HTML:
<body>
<div id="top"></div>
<div id="container">
<div id="content">
</div>
</div>
<div id="right">
</div>
<div id="bottom"></div>
</body>
This will do what you want.
Markup
<body>
<div id="top">top</div>
<div id="container">
<div id="content">
content
</div>
<div id="right">
right
</div>
<br style="clear:both" />
</div>
<div id="bottom">bottom</div>
</body>
CSS
#container {border:1px solid blue;}
#content, #right {float:left;}
#content {width:400px; border-right:1px solid blue;}
Doesnt anser your issue fully, as your question is a tad lightweight, but you can position divs however you want. Fiddle here: http://www.jsfiddle.net/ozzy/F3K8k/
Have updated fiddle: http://www.jsfiddle.net/ozzy/F3K8k/1/