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.
Related
I'm trying to get some floated elements to appear outside of a container on a drupal page that is using a theme based on Omega. my page is currently structured as such:
<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
<div class="container-12">
<div class="pricing-main-background">
<div class="grid-4 plan-box-orange">
</div>
<div class="grid-4 plan-box-green">
</div>
<div class="grid-4 plan-box-orange">
</div>
<div class="pricing-subtext">
some more text down here
</div>
</div>
</div>
</div>
Here's a sketch of what I'd like to accomplish (notice the smaller boxes outside of the container):
Visual Aid
Can anyone help provide a way to make this work (preferrably that doesn't require a mess of CSS when the boxes stack (at 480px)?
Something like this?
h2
{
width:60%;
border:1px solid black;
border-bottom:0;
margin:0 auto;
text-align:center;
}
.grid-12
{
width:60%;
border:1px solid black;
margin:0 auto;
text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
display:inline-block;
width:30%;
height:50px;
margin-top:25px;
}
.grid-4:nth-of-type(1)
{
position:absolute;
left:-10%;
}
.grid-4:nth-of-type(3)
{
position:absolute;
right:-10%;
}
I appear to have a peculiar problem.
I've got the following code snippet and as you can see i've just added the footer div at the end:
<body>
<div id="conainer">
<div id="wrapper">
<p>this is the wrapper</p>
<div id="centerDoc">
<p>this is the centerDoc</p>
</div> <!--centerDoc !-->
</div> <!-- wrapper !-->
</div> <!--container !-->
<div id="footer">
<p>footer</p>
</div>
</body>
I get the follwing output [I added borders to see whats going on]:
I hope you can see that the centerDoc div is inside the footer div and i don't understand why.
CSS for divs:
#container {
margin:auto;
width: 100%;
}
#wrapper{
width:80%;
border:1px dashed black;
}
#centerDoc {
margin-top:2.8%;
margin-left:10px;
float:left;
width: 100%;
border:1px dashed black;
}
#footer{
text-align:center;
color:#333333;
border:1px dashed black;
}
Any pointers to sort this out is appreciated!
That is normal behavior. Your #centerDoc division is floated left, so it's position is correct. However, because it's floated, it's removed from the flow of the document, so it's not included in the height of the wrapper division and the footer division fills in behind it, then the text moves down so that it's not behind other content.
#animuson is right. you may use "clear: both;" to fix it. see below
<pre>
#footer{
text-align: center;
color: #333333;
border: 1px dashed black;
clear: both;
}
</pre>
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>
Here is my example:
<div id="mainContainer">
<div id="itemIWantToCenter"></div>
<div id="itemIwantFloatedRight"></div>
</div>
The mainContainerwidth width is set to 100%. The itemIwantFloatedRight width is set to 300px. Let's say that the itemIWantToCenter has a width of 200px. How would I center that div while floating the other within the container? Thanks!
Hope this helps:
<div id="mainContainer">
<div id="itemIWantToCenter" style="float: right;"></div>
<div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>
Here's a fiddle of my solution and the code is below (fixed link)
The advantages to this solution is that when the parent container's size changes, the content container will expand, while retaining it's margins and the right sidebar will always remain on the right.
Hope this helps.
Note In the fiddle, the content container is a little slim. This is due to the size of the window. Change the size of the window {hover over the dividers, click and drag}, to see the benefits.
<div class="container">
<div class="content">
centered content
</div>
<div class="right">
right
<div>
</div>
.container {
width:100%;
position:relative;
}
.container .content {
width:auto;
margin:0 200px;
background:green;
}
.container .right {
width:200px;
position:absolute;
top:0px;
right:0px;
background:#f00;
}
.content, .right {
height:300px
}
You should use a linked stylesheet ofcourse...
<div id="mainContainer" style="width:100%; border:solid 1px red;">
<div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right">
right
</div>
<div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;">
center
</div>
</div>
I have a basic layout that is one Div container wrapper and three columns Divs inside. I want the left and right column to be of fixed with, with the middle one being dynamic to fit it's open space.
Here's a picture to demonstrate what it looks like now:
The red border is the container, and the blue border div is the one I want to expand to stretch as wide as it can so the yellow div is always almost touching the right border of the parent.
Thanks!
#body
{
border: 1px solid red;
min-height:800px;
width:auto;
margin-left:50px;
margin-right:50px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:auto;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
.advert
{
}
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
</div>
</div>
Since display:table-cell is now universally supported in all modern browsers you might as well use that: http://jsfiddle.net/Lbpeh/1/
HTML
<div id="root">
<div id="left">
Left
</div>
<div id="middle">
Middle
</div>
<div id="right">
Right
</div>
</div>
CSS
#root {
display:table;
border-spacing:0;
width:100%;
height:500px;
}
#root > div {
display:table-cell;
}
#left {
background:red;
width:25%;
}
#middle {
background:green;
}
#right {
background:blue;
width:100px;
}
Keep in mind that table-like layout has some issues of its own, but what you're essentially trying to achieve is the behaviour of tables with semantically more correct markup. That's what display:table-cell is for.
There are quite a few:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
http://www.tjkdesign.com/articles/3cols.asp
http://www.alistapart.com/articles/holygrail
3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)