I have some questions about basic CSS that I was unable to understand or find an answer for.
First, I tried placing 3 div tags within another div tag. The first main div tag containing the 3 other tags had nothing set for it except a size, which was 400px by 400px. Of the other 3 divs inside, all were 20px by 20px, and 1 was assigned float:left, and the other two were assigned a style that was float right. All attributes were defined within a style, and the two divs that were float:right were assigned the same style. My problem is that out of the 2 divs, the one that came last in the code, would appear first in a browser, and I did not understand the reasoning for this.
Here is the code:
<html>
<head>
<style>
#main{
border: red 4px dashed;
width: 25%
height: 25%,
}
#left{
float: left;
width: 20px;
height: 20px,
}
#right{
float: right;
width: 20px;
height: 20px,
}
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">2</div>
<div id="right">3</div>
</div>
</body>
</head>
</html>
My problem is that out of the 2 divs,
the one that came last in the code,
would appear first in a browser, and I
did not understand the reasoning for
this.
I think that You misunderstood a "appear first". You set Your divs to be floating right. So a "2" div, which is FIRST in Your code, is FIRST to be floated right, so it goes first to the right side. A "3" div is then floated, so i goes to the left side of the "2" div - because "2" was first, it took first place at the right side of the browser window, and div "3" took second place at the right side of the window.
In this case "second place at the right side of the window" means "first, looking from the left" ;-)
At first, I would use class and not id for the divs. But there are also some typo's in the css:
#main{
border: red 4px dashed;
width: 25%; /* <-- Missing ; */
height: 25%; /* <-- change , to ; */
}
#left{
float: left;
width: 20px;
height: 20px; /* <-- change , to ; */
}
#right{
float: right;
width: 20px;
height: 20px; /* <-- change , to ; */
}
I don't know about the layering problem, but you can't have two elements with the same ID. You probably want:
...
<div class="right">2</div>
<div class="right">3</div>
...
and change #right to .right in the CSS.
I think your problem is that you are using id instead of class. An ID is supposed to be unique, so the second div with id="right" is the only one with that id.
You could change your code such that you have:
< div class="right" >2< /div >
< div class="right" >3< /div >
(instead of id="right")
And in the css you would have:
.right {
float: right;
width: 20px;
height: 20px,
}
(instead of #right)
you can use this code
<div id="main">
<div id="left">1</div>
<div id="right">3</div>
<div id="right">2</div>
</div>
You cannot use the same id for more than one time.
<div class="right">2</div>
<div class="right">3</div>
Better way you can do it with assigning class.
<html>
<head>
<style>
#main {
border: 4px dashed red;
display: block;
overflow: hidden;
}
#left {
float: left;
width: 20px;
height: 20px,
}
#right {
float: right;
width: 20px;
height: 20px,
}
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">3</div>
<div id="right">2</div>
</div>
</body>
</head>
</html>
Related
I'd like to lay out HTML divs relative to one another, like Android's RelativeLayout.
Any idea how to achieve it? Thanks.
EDIT: The question is a general one but I see people request a specific example so here's the one from the link. You can simplify the example layout requirement to be: Blue square from start to finish. Below it two squares: Red and Yellow. Yellow to the right of red till the end. Below the yellow, a green square aligned to the right. Overall 4 divs, laid out relative to one another.
You can put divs on the same 'line' by using the display property in CSS.
Use
display: inline;
or
display: inline-block;
'inline-block' means your div can be given height and width properties while 'inline' will just be the size of your content. In this case, you'll probably want to use inline-block so you can line up your divs.
Found a way using float and clear:
<!DOCTYPE html>
<html>
<body>
<div style="width: 100%; height: 50px; background-color: blue;"></div>
<div style="width: 60%; height: 50px; background-color: red; float: left"></div>
<div style="width: 40%; height: 50px; background-color: yellow; float: left"></div>
<div style="width: 40%; height: 50px; background-color: green; clear:left; float: right">
</body>
</html>
You can play with the code here.
* The purpose of clear:left is to keep the green in the next line - even when the sizes of the red and yellow get changed to pixels instead of percentage.
Like Android, in HTML you cannot directly define Linear or Relative Layout. But through CSS you can define whatever design you want.
For example, in your question you have asked four inputs to align in a particular format.
You can wrap all inputs in a div, and make it align using float property.
The layout is here.
Edit: Here is the layout with .div2_2 in px value.
You can achieve this layout using the following html and css.
HTML
<div class="parent">
<div class="div1">
<input type="text" placeholder="Reminder Name"/>
</div>
<div class="div2">
<div class="div2_1">
<input type="text" value="Wed, Jun 27, 2012"/>
</div>
<div class="div2_2">
<input type="text" value="8.00am"/>
</div>
</div>
<div class="div3">
<div class="div3_1">
<input type="button" value="Done"/>
</div>
</div>
</div>
CSS
div{
padding: 3px 0;
}
input {
width: 100%;
}
.parent{
width: 400px;
}
.div1, .div2, .div3{
width: 100%;
}
.div2{
display: inline-block;
}
.div2_1, .div2_2{
display: inline-block;
}
.div2_1{
width: 55%;
float: left;
}
.div2_2{
width: 44%;
float: right;
}
.div3_1{
width: 30%;
display: inline-block;
float: right;
}
I hope this will be helpful for you.
Check out this page to find out how to layout your webpage in a "Grid System"
getbootstrap.com/css
I'd like to know how to get the following result:
Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the text in the title.
How do I achieve this? I've tried floating the red box on the right but it seems to push the text in the title to the left for some reason.
Edit - For the record, I hadn't posted an example because HTML and CSS isn't really my area of expertise and I'm struggling to get back to an example where the text didn't align (having tried half a dozen different methods I've been reading).
Here's roughly what I was trying: http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>
Move the element up into the header, set it to position:absolute and give it a margin-left:500px;
http://jsfiddle.net/3fgytw0u/2/ <-- that one is right
Maybe it would help you: Link
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
position: relative;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
text-align:right;
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: grey;
}
Alternative approach to positioning can be using negative margin-left equal to width of red area:
h2 {
padding: 10px;
background: #EEE;
text-align: center;
overflow: hidden;
}
h2 .right-block {
width: 50px;
height: 50px;
background: coral;
float: right;
margin-left: -50px;
}
<h2>
Some centered text
<div class="right-block"></div>
</h2>
Here is what you want.
<html>
<head></head>
<body>
<div style="border:green 1px solid;height:700px;" >
<div style="border:blue 1px solid;width:100%;height:200px;text-align:center">
Some Title Text
<div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;">
Some text
</div>
</div>
</div>
</body>
</html>
Red div will float on the right inside the blue one.
That could be simply done by positioning the inner div as position: absolute and putting it right: 0px, but because you need to prevent that it does not start to be positioned with the main display instead, you put position: relative to the outer div too. Also make sure that while writing you put the red div first and then the div which has purple text, or you can just add top: 0px so that you don't care about that anymore.
Then it should work!
Here's a fiddle: http://jsfiddle.net/xg6rove7/
But be wary of the fact that any text in the red box can then overlap the text in the purple, as I have tried to show you in the fiddle. You might b better with using a padding for both sides equal to the box's width, or just use your plain old float: right
What is the easiest way to align a div to center widthout using position. i have 3 div and i want to set center of page with using CSS
<!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
float:right;
}
</style>
<body>
<div id="content">
content 1
</div>
<div id="content">
content 2
</div>
<div id="content">
content 3
</div>
</body>
</html>
You are using same ids multiple time. ids must be unique.
Use class instead.
Wrap all content divs in an element:
HTML:
<div class="container">
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
</div>
CSS:
.container {
width:606px; /* (200*3) = 600 + (6px for borders) */
margin:0 auto;
}
.content {
width: 200px;
height: 200px;
border: 1px solid #000;
float:left;
}
DEMO here.
First of all, don't use ID like class, you can repeat ID so many times but it's a bad practice.
And I'm not sure if I understood it right, but remove float:right from your css which will get your div's one below another. You can see output fiddle
Here is the css with few line of code
.container{width:100%;}
.container div{border:1px solid red;margin:0 auto;width:200px;}
Give it a width and do margin: 0 auto;
Ow, and use an unique id.
first of all you are using "id" selector for 3 elements/containers which is wrong.
replace the style with below snippet
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
}
</style>
i just have removed the floating (which forcing your containers to be on right)
Wrap divs with a parent div and add margin:0 auto
.wrapper{
width:200px;
margin:0 auto;
border:solid 2px red
}
.content{
background:grey;
}
DEMO
You want to modify your code as less as possible?
Then you might want to delete your floating:
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
/*float:right;*/
}
Because you are using a margin to center the element, a float is not neccesary. A float will only put the element out of the flow(so basically the <body> doesn't see these elements as his content, which results that the elements cannot center them selves from their parent. There is no parent of the same flow!)
jsFiddle
It is also a good call to not use the same IDs. IDs should always be unique
However same IDs are supported by CSS, but it is a good practice to use unique IDs from now on.
You can use the margin: 0 auto; on the element which has to be placed in the center. However in order to do this the element must have some sort of a wrapper(not "body") to be able to use the auto setting.
<html>
<head>
</head>
<body>
<div id="page_wrapper">
<div id="div_1" class="centered_div">foo</div>
<div id="div_2" class="centered_div">foo</div>
<div id="div_3" class="centered_div">foo</div>
</div>
</body>
</html>
CSS:
#page_wrapper{
width:100%;
}
.centered_div{
margin: 0 auto;
}
This centers all elements which have the class centered_div to the middle of their parent.
Other option is to used fixed canter position. For example if you're creating a popup notification message, this might be a way to go.
.notification_window{
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
But if it's just a regular page element like a div with some content use the first example.
If you need any further explanations please comment.
I have the following markup. I am trying to have "Previous" all the way to the left, "Next" all the way to the right, and the numbers centered. I can't seem to get the numbers centered.
I tried margin: 0 auto; on .numbers to no avail. The closest I've come was to set the left margin on .numbers to something like 40%, but that seems hackish, because previous and next might not always be there, and there may be more or less than 4 numbers. I'm pretty flexible with the markup and css.
http://jsfiddle.net/dcsUc/15/
<div id="content">
<div class="pagination">
<div class="previous">Previous</div>
<div class="numbers">
1
2
3
4
</div>
<div class="next">Next</div>
<div class="clear"></div>
</div>
</div>
And
#content {
width: 100%;
border: 1px solid #000;
}
.previous, .numbers {
float: left;
}
.next {
float: right;
}
.clear {
clear: both;
}
Move div.next to before div.numbers in the markup, don't float .numbers, and apply text-align: center to .numbers.
jSFiddle for those who don't think in css ;)
If you want to use "margin: 0px auto" you also have to set a width for the div.
I have created two rounded corner boxes which i would like to be aligned next to each other .But the 2nd box is appearing directly below the first one inspite of me using float:left on the 1st one. Any way to fix this would be really helpful. Below are the html and the css.
The HTML :
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="layout.css"/>
</head>
<body>
<div id="containerDiv">
<!-- Box 1 -->
<div id="box1" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
<!-- Box 2 -->
<div id="box2" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
</div>
</body>
</html>
The CSS :
#containerDiv {
width: 1000px;
}
.boxDiv {
width: 248px;
}
.upperRound {
background-image: url('rounded_upper.gif');
height: 20px;
}
.lowerRound {
background-image: url('rounded_lower.gif');
height: 20px;
}
.boxContent,.boxTagLine {
border-left: 2px solid #B5B5B5;
border-right: 2px solid #B5B5B5;
padding: 10px;
background-color:#F8F8F8;
solid #B5B5B5;
}
.boxTagLine {
color:#0066FF;
}
#box1 {
float:left;
}
Second div must float to right and next element should clear float. I'll add more info in a second.
I was a bit wrong. You even don't need clearing div.
Check out this question.
So - in your case, add this to css=>
#box2 {
float:right;
}
#containerDiv {
width: 1000px;
overflow: hidden;
}
I didn't try it, but it should work.
Mine approach will leave space between boxes. So - it might be not desired effect.
You would be better off using spans
But if you have to use divs :
.boxDiv {
width: 248px;
display: inline;
}
float both boxes left:
#box1,#box2 {
float:left;
}
You'd be better off floating your .boxDiv left, like so:
.boxDiv {
width: 248px;
float: left;
}
That way if you add more boxes they'll float straight away, otherwise you'd have add the specific class names:
#box1, #box2, #box3, #box4 {
float:left;
}