I have a frame which is 760px wide.
I then have a div called main inside that which is 750px wide and has padding of 5px.
.main {
width:750px;
background-color:#FFF;
border-style:solid;
border-width:thin;
padding:5px;
margin-bottom:10px;
}
I then have a div inside that called latest which i want 3 side by side.
.latest {
width:240px;
padding:5px;
}
If I put float:left on the latest div, it ends up with them being outside of the main.
<div class="main">
<div class="latest">
asdasdas
</div>
<div class="latest">
asdasdas
</div>
<div class="latest">
asdasdas
</div>
</div>
The code i use to put it all together.
I cant think of anything else.
Thanks for reading, hope you can help!
.latest {
width:240px;
padding:5px;
float: left;
}
something to read
http://css.maxdesign.com.au/floatutorial/
Read this,
http://css.maxdesign.com.au/floatutorial/clear.htm
This will probably solve your problem
add this in your main div
<div class="clear"></div>
and add this in your style
.clear {
clear: both;
}
Add overflow: auto to the .main div.
More explanation here: http://gtwebdev.com/workshop/floats/enclosing-floats.php
Related
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 :)
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've looked at so many posts on this I'm at a loss as to why its not working for me.
.firstCell
{
float:left;
width:40%;
text-align:right;
align:right;
border:1px solid white;
}
.cell
{
float:left;
width:auto;
align:left;
text-align:left;
border:1px solid white;
}
.newRow
{
clear:both;
width:100%;
}
.container
{
width:100%;
background-color:#DEEFF8;
margin:0px auto;
}
So, I basically have this:
<div class="container">
*Within this I have sections of like a form*
<div style="width:400px;border:1px solid black;">
<div class='firstCell'>File Name:</div>
<div class='cell'><html:text property="fileName" /></div>
<div class='cell' style='color:red;'>(Max 50 character)</div>
<div class='newRow'></div>
<div class='firstCell'>Copy Book Name:</div>
<div class='cell'><html:text property="copyBookName"/></div>
<div class='newRow'></div>
<div class='firstCell'><html:button property="populateFields" value="Populate Fields" onclick="showFields();"/></div>
<div class='newRow'></div>
<div class='newRow'></div>
</div>
*So this is one section, what I would like to happen is to position my form elements in this and then have it all be centered on the main div
</div>
Your main .container has 100% width, it doesn't matter if you center it, it will still start drawing it from the very left. The div inside of it that's responsible for the left-aligned box has no id/class, and you're doing no aligning on it. Technically your main container is centered, but everything inside of it is left-aligned.
Do you mean like this? http://jsfiddle.net/36ujG/
It's a little hard to understand what you are trying to center. All I did was added margin: 0 auto to the child div of container.
I want to develop some kind of utility bar. I can position each element in this bar side by side using float:left;
But I want the second element to be positioned at the very right of the bar. This is hard for me because the width of the bar is not static.
Have a look at my demo: http://jsfiddle.net/x5vyC/2/
It should look like this:
Any idea how to achieve this using css?
Is this what you wanted? - http://jsfiddle.net/jomanlk/x5vyC/3/
Floats on both sides now
#wrapper{
background:red;
overflow:auto;
}
#c1{
float:left;
background:blue;
}
#c2{
background:green;
float:right;
}
<div id="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>
Just wanna update this for beginners now you should definitly use flexbox to do that, it's more appropriate and work for responsive try this : http://jsfiddle.net/x5vyC/3957/
#wrapper{
display:flex;
justify-content:space-between;
background:red;
}
#c1{
background:blue;
}
#c2{
background:green;
}
<div id="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>
Use float: right to.. float the second column to the.. right.
Use overflow: hidden to clear the floats so that the background color I just put in will be visible.
Live Demo
#wrapper{
background:#000;
overflow: hidden
}
#c1 {
float:left;
background:red;
}
#c2 {
background:green;
float: right
}
if you don't want to use float
<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
<div style="">
<p> Hello </p>
</div>
I have one more solution other than float: right.
text-align: right;
padding: 10rem 3rem 2rem 3rem;
width: 58%;
align-items: end;
margin: 0px 0px 0px auto;
sometimes float does not work when we use width element for specific width at that time we can use the above code
This works for me.
<div style="position: relative;width:100%;">
<div style="position:absolute;left:0px;background-color:red;width:25%;height:100px;">
This will be on the left
</div>
<div style="position:absolute;right:0px;background-color:blue;width:25%;height:100px;">
This will be on the right
</div>
</div>