This is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
Related
I am new to CSS programming . Using overflow:hidden for hiding image greater than DIV area. Perhaps I want hidden part of image should be in the left part, but currently its taking right part. My code follows as below.
Html code:
<div class="a1">
<img src="img/image4.jpg">
</div>
CSS:
.a1{height:200px;width:100px; overflow:hidden;}
Try this (notice the direction: rtl;):
.a1 {
height:200px;
width:100px;
overflow:hidden;
direction: rtl;
}
<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">
</div>
.a1 {
height:200px;
width:100px;
overflow:hidden;
background:#ff0;
}
<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">
</div>
Seems to work fine for me. I added the yellow background to show where the DIV is at and linked to an SO sprite.
If you're getting a different effect, then it's quite likely the CSS on your page elsewhere which is cascading and causing the conflict.
Side note: Writing a stylesheet in CSS is not really called "programming". :)
Click Run code snippet to see this in action.
Or, for the converse:
.a1 {
height:200px;
width:100px;
overflow:hidden;
background:#ff0;
}
<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b" align="right">
</div>
.a1 {
height:200px;
width:100px;
overflow:hidden;
direction: rtl;
}
<div class="a1">
<img src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
use float:right for image element
<div style="width:200px; height:200px; overflow:hidden">
<img style="float:right" src="url" />
</div>
I have got the following code working fine on FF. As you can guess, I want the following two divs stays on one line without breaking when browser resize.
<div style="float: left; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
But as per usual, when I tested the page with IE 9, the right div was already below the left one.
Can someone pls help me out here, thanks,
Either add "float:right" in your second div or
add "width:XXpx" into your first div.
Wrap it with another div
<div>
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
</div>
you also float the other div
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
==========================================================>>>
UPDATE
HTML
<div class="marginRight"></div>
<div></div>
CSS
div {
float:left;
border:1px solid red;
width:45%;
height:100px;
}
.marginRight {margin-right: 10px;}
WORKING DEMO
it is working fine
if you want more configuring
<div style="display:table-row;">
<div style="width:49%; margin-right:2%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
<div style="width:49%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
</div>
Use a container div and set the two divs to either % of total width or total px of the page.
#containerdiv {
width:100%;
overflow:hidden;
}
#leftdiv {
width:20%;
overflow:hidden;
float:left;
#rightdiv {
width:80%;
overflow:hidden;
float:left;
}
<div id="containerdiv">
<div id="leftdiv"> TEST </div>
<div id="rightdiv"> TEST </div>
</div>
Remember if you use margins and paddings you will need to adjust the percentages or pixels for it to line up next.
For example. If you add padding 1% to left div, it will push the right div down to second line since you are now at a total of 101% of the container divs width.
I have a wrapper. Inside that wrapper I have 3 divs. I would like #contentOne standing above #contentTwo and contentThree standing on the right side of those two. I am sure someone can help. Thank you in advance for your replies. Cheers. Marc. (This positioning thing is killing me....)
http://jsfiddle.net/Qmrpu/
My HTML:
<div id="wrapper">
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
<div id="contentThree" class="content">contentThree</div>
</div>
My CSS:
#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}
.content{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;}
#contentThree{
height:130px;}
Can you put them in floated column wrappers?
<div id="wrapper">
<div id="column1" class="column">
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
</div>
<div id="column2" class="column">
<div id="contentThree" class="content">contentThree</div>
</div>
</div>
CSS:
.column {
float: left;
}
http://jsfiddle.net/xbcxs/
That's how I would've done it. Notice the position:relative on the wrapper div and position:absolute; right:0; on the third div.
http://jsfiddle.net/remibreton/7javg/
HTML is lacking in providing functions for vertical positioning. They are getting better with newer display values, but you need to limit your audience to only modern browsers. Barring that you need to change the order of the HTML to get the vertical position you want. In this case if you put the 3rd section at the top and gave it a float:right you get what you are after.
http://jsfiddle.net/Qmrpu/1/
Why not use a table for layout?
http://jsfiddle.net/Qmrpu/3/
try this:
<div id="wrapper">
<div id="contentThree" class="content">contentThree</div>
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
</div>
#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}
.content{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;}
#contentThree{
height:130px;
float: right;
}
I got a little problem and nothing I test seems to work.
My HTML:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
CSS:
#top_parent {
background:#f00;
height:100px;
}
#top{
background:#0f0;
float:right;
position:relative;
height:100px;
width:50%;
}
#content{
top:-50px;
background:#00f;
<!-- position:relative;-->
height:100px;
width:80%;
margin:auto;
}
#parent{
background:#000;
height:350px;
width:100%;
}
#bottom {
height: 50px;
background:#ff0;
bottom:0px;
<!--position:absolute; -->
<!--position:relative; -->
}
Now my problem is, the footer won't get under the parent div, it stays in the content area. What am I doing wrong?
jsF link: my source
Thanks for the help.
You have not closed this div:
<div id="content">Here comes random stuff<div>
Should be:
<div id="content">Here comes random stuff</div>
You could see this easily if you indented your divs:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff<div> <!-- Can see the problem -->
</div>
<div id="bottom">Footer</div>
Not sure if you copy-pasted or if this is a typo when you posted your code, but this line:
<div id="content">Here comes random stuff<div>
Should have a closing </div> tag at the end instead of that opening <div> tag. If that's actually your HTML, then it would not be grouping the divs the way you want/expect.
I think you have a wrong html:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
You didn't close div parent, nor content
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
<div id="bottom">Footer</div>
</div>
Interpreting that you want the "bottom" div inside the "parent", else:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
</div>
<div id="bottom">Footer</div>
Also, in your css you should enable the position:relative for #content div, else the top parameter won't work.
Try if this solves the problem.
In order to position footer after the content divs you have to float content divs first and then add clear:both css command to the footer. So your tree sould look like this:::
<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>
For this example your css should be as following:::
div.wrapper{
width:80%;
position:relative;
margin:0 auto;
}
div.left{
float:left;
width:60%;
background:green;
height:200px; /height only for testing so you could see the result/
}
div.right{
float:right;
width:30%;
background:red;
height:200px; /height only for testing so you could see the result/
}
div.footer{
clear:both;
height:40px;/height only for testing so you could see the result/
background:yellow;
width:100%;
}
Have you tried taking out that "bottom" attribute in the #bottom rule?
I have div with position absolute and I want to put another div under.
The two divs have diffrent widths.
The div above is with position absolute and is centered. The div that should be at the bottom has 100% width.
How to make that?
Thanks!
make one div that contains both
use float:right
example:
div#p8015buttons {
position:absolute;
bottom:0.5em;
right:0.5em;
width:90px;
}
div.p8015 {
float:right;
margin:1px;
}
Wrap both DIVs in a third one and position that one absolute instead of the original one.
Not tested, but this should do it.
HTML:
<div class="wrapper">
<div class="one">
Content
</div>
<div class="two">
More content
</div>
</div>
And the CSS:
.wrapper
{
position:absolute;
width: 500px;
height: 400px;/*whatever you want*/
}
.one,
.two
{
position:relative; /*or static*/
}
Hope it helps :)
Tested
HTML MARKUP
<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>
CSS
.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}
Try this one, you can then move style to your css
<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>