I want the outer div, which is black to wrap its divs floating within it. I dont want to use style='height: 200px in the div with the outerdiv id as I want it to be automatically the height of its content (eg, the floating divs).
<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width=300px;border: red 1px dashed;float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
How to achieve this?
You can set the outerdiv's CSS to this
#outerdiv {
overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}
You can also do this by adding an element at the end with clear: both. This can be added normally, with JS (not a good solution) or with :after CSS pseudo element (not widely supported in older IEs).
The problem is that containers won't naturally expand to include floated children. Be warned with using the first example, if you have any children elements outside the parent element, they will be hidden. You can also use 'auto' as the property value, but this will invoke scrollbars if any element appears outside.
You can also try floating the parent container, but depending on your design, this may be impossible/difficult.
Firstly, I highly recommend you do your CSS styling in an external CSS file, rather than doing it inline. It's much easier to maintain and can be more reusable using classes.
Working off Alex's answer (& Garret's clearfix) of "adding an element at the end with clear: both", you can do it like so:
<div id='outerdiv' style='border: 1px solid black; background-color: black;'>
<div style='width: 300px; border: red 1px dashed; float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width: 300px; border: red 1px dashed; float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
<div style='clear:both;'></div>
</div>
This works (but as you can see inline CSS isn't so pretty).
You may want to try self-closing floats, as detailed on http://www.sitepoint.com/simple-clearing-of-floats/
So perhaps try either overflow: auto (usually works), or overflow: hidden, as alex said.
I know some people will hate me, but I've found display:table-cell to help in this cases.
It is really cleaner.
First of all you don't use width=300px that's an attribute setting for the tag not CSS, use width: 300px; instead.
I would suggest applying the clearfix technique on the #outerdiv. Clearfix is a general solution to clear 2 floating divs so the parent div will expand to accommodate the 2 floating divs.
<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
<div style='width:300px; float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width:300px; float: left;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
</div>
Here is an example of your situation and what Clearfix does to resolve it.
Use jQuery:
Set Parent Height = Child offsetHeight.
$(document).ready(function() {
$(parent).css("height", $(child).attr("offsetHeight"));
}
Add a new, empty div just before the closing tag of the parent with this style: clear: both;. Like this: <div style="clear:both"></div>.
I spent over a week trying to figure this out!
Related
I have 2 divs side by side.
In the first div, I have 2 labels side by side, and one input text below them. One of the labels is an error information. Sometimes it will be displayed, sometimes not. When it's not display, I'd like the div to resize to be smaller, so the second div can be closer to it.
The second thing is the same thing, except it has one label div, therefore it doesn't requires a resize.
Is there a way to achieve what I want? There is an awesomely drawn example of what I want to acahieve below:
This is the code.
<div id="main-div">
<div id="address-number-div">
<label>Number</label>
<label class="error" id="number-error">Empty Field</label>
<input id="number-input" onfocus="onfocus('number-error')"/>
</div>
<div id="address-complement-div">
<label>Complement</label>
<input id="complement-input" />
</div>
and CSS:
div {border: 1px solid #000000; padding: 5px;}
.error{color:#FF0000; margin-left:5px;}
#main-div div {display:inline-block;}
#main-div input {display:block;}
#number-input {
width: 16%;
}
Have a look at this DEMO.
Floating your divs left should solve this problem.
Set them to display: inline-block; to let them shrink to fit the the content.
Don't give width <persentage> type value, give <length>:
#number-input { width: 24px; }
See it with your code on my fiddle.
<div id="logo" style="center"><img src="logo1.png"></img></div><br><br><br><br><br><br><br></div>
This doesn't work.
Whats the problem with the style of the div? i'm sure the syntax is wrong.
"center" is not a style. You're probably looking for text-align: center.
Images are self-closing like the line-break. You don't use </img>.
You have a spare closing </div> at the end of the line. One of them needs removed, I'm not sure which spot you want it in.
<div id="logo" style="text-align: center"><img src="logo1.png"></div><br><br><br><br><br><br><br>
you cannot define style in div like that instead you can define the div property in css and call the class or id of the css.
Best way to center a element is probably to specify its width and put the side margin to auto:
If for example your logo1.png is 570px wide, you would do something like this in the css
#logo{
margin:0px;
margin-left:auto;
margin-right:auto;
width:570px;
}
Try this. You have to set the width of a div as shown below in order for it to work. To specify that the text inside the div is centered, simply apply style="text-align: center"
<div id="logo" style="margin-left: auto; margin-right: auto; width: 500px; border: 1px solid #ff0000">Your content here....</div>
Note: set 500px width to your desired width. Also, remove border: directive. I just added that so you could see the DIV was centered.
fiddle
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.
I am trying to shift my style away from using tables to control formatting, but I haven't seen a simple css solution that does exactly the same thing as
<table><tr><td>aribitrary-html-A</td><td>aribitrary-html-B</td></tr><table>
All I want is to make sure aribitrary-html-A and aribitrary-html-B are aligned horizontally. I have tried various CSS concoctions using display: inline, clear: none, and float: left but they all have unwanted side-effects of moving my content around, while the table-tr solution just does what I want, regardless of what's in the arbitrary HTML, and regardless of what is in HTML that contains my table.
Am I missing something?
Why not use a grid system then like 960gs
You probably need this
<div id="wrap">
<div id="left">
content 1
</div>
<div id="right">
content 1
</div>
</div>
#wrap {
width: 50%; /* change this as you wish */
}
#left, #right {
display: block;
float: left;
}
You need to use <div>s and decent CSS. For people that aren't confident enough (or lazy, like me) Yahoos YUI CSS Grid Builder is invaluable! Enjoy!
Maybe this might help you?
<div style="width:400px;margin:0 auto;">
<div style="background-color:red;float:left;height:200px;width:200px;">
</div>
<div style="background-color:blue;float:right;height:200px;width:200px;">
</div>
</div>
Just don't put your css within style attributes like I did.
Just create two Divs and align the one you want to have on the left side.
Like so (update):
<div id="wrap" style=" width:300px;
margin:auto;
border: 1px solid black;
padding:1px">
<div id ="A" style="float:left;
border: 1px solid black;"> aribitrary-html-A </div>
<div id = "B" style="border: 1px solid black;"> aribitrary-html-A</div>
</div>
Update: I added a wrapper with a defined width. Also I used some borders to visualize the table-like layout. Hope that helps.
Wrap element in a div, set fixed width for the wrapper. Give each element in the div a width and set the margin to 0 auto.
Just set the CSS "float" property to left on every element you want to display horizontally, and make sure each of those elements have a set width.
I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.