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>
Related
How can i set the width of the first 2 divs to be dynamic (fit the contents width), while the 3rd div should use remaining horizontal space and be horizontally scrollable.
The result i need is that all 3 divs sit side by side and the 3rd div is hoziontally scrollable.
Script i have is as follows
HTML
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
CSS
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
width: 100%;
overflow-x: scroll;
}
The above script pushes div3 to the next line, which i dont want.
If you float #a and #b to the left, #c will fill the rest of the parent's width.
To get #c horizontally scrollable, you style its content container as:
#c .scroll-content {
/* You shouldn't do this on a table, but rather on a wrapping container. */
display: inline-block;
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
I made an example at JSFiddle.
You should set a parent div to hold them all together in the same row. Something like this instead should work.
<div id="parent">
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
</div>
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
}
#parent{
width: 100%;
overflow-x: scroll;
}
Also you might want to refactor your code. Since all of the divs are floating left, you might want to use just one class that floats to the left. I hope this helps.
The CSS...
#a {
float:left;
border:solid 1px #000;
width:33%;
}
#b {
float:left;
border:solid 1px #000;
width:33%;
}
#c {
float:left;
border:solid 1px #000;
width:33%;
}
.scroll{
float:left;
overflow:auto;
width:100%;
}
.content {
width:1000px;
overflow:auto;
}
And the HTML...
<div id="a">
This is text within my first content box
</div>
<div id="b">
This is text within my second content box
</div>
<div id="c">
<div class="scroll-content">
This is text within my third content box and this is horizontal and scrollable
</div>
</div>
UPDATED JSFIDDLE LINK BELOW AGAIN!!!
And a demo on jsfiddle - http://jsfiddle.net/GeLqV/1/
Mark, this will work for you now. I now see that you wanted all three divs on the same row, and the last one being able to horizontally scroll. Look at my jsfiddle demo. No matter what your screen size will be, all three div's are fluid in size and will stay together (for the most part).
I have a strange situation, where my middle div is slightly downward.
Here's a screenshot:
HTML :
<div id="footer">
<div class="content">
<div id="info1">
<img src="img/temp.png" alt="About me" />
<h4>About Me</h4>
<p>this is about me section</br>and this is the other line</br>and this is a third line</p>
</div>
<div id="info2">
<h4>Random Photos</h4>
<div id="randomPhotos"></div>
</div>
<div id="info3">
<h3>Follow Me</h3>
<div>
<img src="img/temp.png" alt="facebook" />Facebook
</div>
<div>
<img src="img/temp.png" alt="twitter" />Twitter
</div>
<div>
<img src="img/temp.png" alt="email" />E-mail
</div>
</div>
</div>
</div>
CSS:
#info1, #info2, #info3
{
padding: 10px;
display:inline-block;
}
#info1
{
width:20%;
}
#info1 img
{
margin-right:3px;
width:20px;
height:20px;
background-image:url('../img/glyphicons-halflings.png');
background-repeat:no-repeat;
background-position:-162px 1px;
}
#info1 img, #info1 h4
{
display:inline-block;
}
#info2
{
width:55%;
border-left:1px solid gray;
border-right : 1px solid gray;
}
#info3
{
width:15%;
}
#info3 img
{
width:20px;
height:20px;
margin-right:5px;
}
#info3 img[alt="facebook"]
{
background : url('../img/result.png') no-repeat 0px -30px;
}
#info3 img[alt="twitter"]
{
background : url('../img/result.png') no-repeat 0px -60px;
}
#info3 img[alt="email"]
{
background : url('../img/result.png') no-repeat 0px 0px;
}
#info2 div
{
padding:3px;
}
#randomPhotos
{
height : 100px;
}
I'm really not that good at CSS, so it maybe a small problem. I just can't find it out.
Most browsers, for elements using display:inline-block will automatically use vertical-align:baseline on that element unless you use a CSS reset (that will probably also define the defacto standard as vertical-align:baseline.)
This is the reason for what you are seeing, each one of your info divs is aligning to the baseline. As the central div is smaller height wise you get the gap you are seeing at the top.
To fix it:
#info1, #info2, #info3
{
padding: 10px;
display:inline-block;
vertical-align:top;
}
The second problem you will probably encounter is that now it is aligned top, you have a 'gap' at the bottom with no left or right borders. Either have the borders managed by the full height divs or make all the divs the same height.
I suggest you to add float: left to each of your divs. This solve your problem.
example
You could also try to
position:absolute;
the divs inside the container and then specify
top:0px;
left: (left div with)px;
I am always working with absolute, hope it helps.
#info2
{
vertical-align: top
}
should do the trick.
HTML
<div class="cont">
<div class="size" id="size1"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>
<div class="cont">
<div class="size" id="size2"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>
CSS
.size {
background-color: red;
height: 100px;
width: 100px;
}
#size2 {
width: 200px;
}
.cont {
padding: 10px;
float: left;
}
I need div.cont's widths to be the width of their contained div.size (in my actual example div.size is an image and its with will vary in each instance).
This isnt happening as div.text takes up more space than its container, how can I stop this and make the text wrap?
JS Fiddle
Deleted all the previous stuff as I have (after doing some digging) found an exact duplicate with working solution.
My answer was also incorrect (as the op then specified the image MUST be allowed to be variable)
The answer is found on this jsfiddle and is an exact duplicate of css - shrink a parent div to fit one child's width and constrain the width of the other child
//html
<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
<br/>
<a id="longtext" href="#">lengthen/shorten text</a>
//css
#container{border:1px solid #f00;display:inline-block;margin:10px; display: table;}
#child1{border:1px solid #0f0;margin:10px; display: table-row; width: 1px;}
#child2{border:1px solid #00f;margin:10px; display: table-cell; width: 1px;}
img {border:1px solid #000;}
and basically it works using display:table-* (have a good read up)
'.size{ float:left;}'
let me know if this helps.
Expanding on Paul Sullivan's approach,
in your css:
.size {
...
display:block; /*assuming its an image - making sure its block level*/
...
}
.cont {
...
position:relative; /*add this to parent container if comming from cms*/
...
}
.text {
...
position:absolute;
top:100%; /*just to make sure content doesnt overlaps image*/
...
}
Just gives a plus point for getting content to stretch as wide as the image (plus padding)
Hope it helps,
Fiddle: http://jsfiddle.net/BKRsT/3/
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.
Here is my code:
<style type="text/css">
div.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
}
span.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
}
</style>
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
<span class="page">1</span>
<span class="page">2</span>
<span class="page">3</span>
Div's look fine but they places vertically. Is there any way to place them horizontally in one line?
Span's place in the one line, but the span can not have the width as any inline element.
If there is no way to use DIV's and SPAN's for my task I will use a table, but I am looking for the no-table solution.
xandy is correct, but this is better:
<div class='pageHolder'>
<div class='page'>1</div>
<div class='page'>2</div>
<div class='page'>3</div>
</div>
with CSS:
.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
float: left;
}
.pageHolder{
overflow: auto;
width: 100%;
}
Elements to clear floats is markup. It's like using <br> but for floats. Mixing markup and content is considered bad practice in semantic web.
Read this article for more information.
Use
display:inline-block
in the div's style
Lorenzo's answer is correct, but I would add something to the markup:
<div class='pageHolder'>
<div class='page'>1</div>
<div class='page'>2</div>
<div class='page'>3</div>
<div class='pageHolder-footer'></div>
</div>
in CSS, add:
div.pageHolder-footer{
clear: left;
height: 0;
}
So that the rest of your stuff will flow correctly.
==Alternative method (From Jan, and SitePoint) ==
No need to have the div.pageHolder-footer (but keep pageHolder). And then:
div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */
They both may have drawbacks, but it depends on what you need.
use display:inline; and your div's will be in one line.
other solution : float:left;
Use this
div.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
float: left;
}
Use display: table-cell; It will solve your issue of div alignment in horizontal order.
<div class="content">
<div> Page1</div>
<div>Page 2</div>
<div>Page 3</div>
</div>
CSS
.content > div{
display: table-cell;
}
You can try out with the combination of ul/li with list-style ( css property ) as none.
some thing like
<ul> <li> <div ....</li> <li><div...></li></ul>
or
you can try within table / tds inside divs.