Fiddle
I have two Div , one is in table and other , outside of table .
My problem is , as you can see , divOne overflow outside of parent Div .
I want to show like
---------------------
| ---- ---- |
| | | | D2 | |
| | D1 | | | |
| | | ---- |
| | | |
| ---- |
---------------------
Here is my code ,
html
<div class="wrapper">
<textarea rows="12" cols="8" class="divOne">
Division One
</textarea>
<table>
<tr>
<td>
<textarea rows="6" cols="8" class="divOne">
Division Two
</textarea>
</td>
</tr>
</table>
</div>
Css
.wrapper
{
border: 1px solid #999999;
position: relative;
margin: 0px;
padding: 10px;
width: 600px;
background-color: #FCFCFC;
min-height: 50px;
color: black;
border-radius: 8px;
-moz-border-radius: 8px;
line-height:normal;
}
.divOne
{
float:left;
}
http://jsfiddle.net/fNhet/1/
.wrapper {
display: inline-block;
}
The issue over there is that you are using floats but you aren't clearing
.wrapper:after { /* Using a clearfix */
display: table;
content: "";
clear: both;
}
Demo
So, the parent takes the height of the non floated elements... and thus the background doesn't increase.
For more information on float and clear, read my answers here and here.
In your css try addding to your .wrapper
CSS:-
overflow:hidden;
DEMO.This will do the trick.
use display: inline-block; overflow: hidden; width: 50% .. this will give you some additional effect
Add display:inline-block; to wrapper div then you can get the result.....
Related
i'm trying to wrap my paragraph's text around the image's div, i've tried everithing but can't figured out why is not working, my head is literally floating left and right by now...
here is the css:
/* CSS Document Sidebar */
#sidebar {
background-color: #FFF;
width: 330px;
height: auto;
float: left;
}
#news {
width: 300px;
height: 200px;
margin: 15px;
position: relative;
border: solid 1px;
}
.newsImage {
width: 120px;
height: 120px;
position: absolute;
float: left;
bottom: 0px;
margin: 5px;
padding: 10px;
border: solid 1px;
}
.newsImage img {
width: 100%;
height: 100%;
}
#news p.title {
font-size: 14px;
color: #333;
margin: 5px;
}
#news p.content {
font-size: 12px;
word-wrap:break-word;
margin: 5px;
color: #333;
}
/* CSS Document Sidebar - END */
here the divs
echo '<div id="news">';
echo '<p class="title">'.$row_Display['PageName'].'</p>';
echo '<p class="content">'.$row_Display['PageContent'].'</p>';
echo '<div class="newsImage">';
echo '<img src="'.trim($row_Display['Image'], '/').'" />';
echo '</div>';
echo '</div>';
UPDATE:
Add here an example of my structure (i don't have the reputation for upload an image):
-----------------------
| <p>[TITLE] |
| |
| <p>[CONTENT] |
|-----------| content |
| IMAGE div | wrap |
| | around |
-----------------------
SOLUTION:
The problem was the position:absolute like Martijn said, but with some tests i manage to reach my own solution. For those who are still stuck on this issue you just need to:
Delete the position:absolute and position:relative from the CSS
Set every paragraph <p> to <div> with the same classes or id
Now put in HTML code the <div 'title'> on top and set float:left
Create under the previous an emtpy <div class='clear'></div> and set the CSS .clear{clear:both;}
Now the image's div goes INTO the content/text's div, make sure to put the <img src='' /> just before the text so the image can float free.
And then you can set the CSS with .img{float:right;} and .content/text{float:left;}. Doing this the text will wrap perfectly around the image
For those who voted negative i'm sry if my previous post wasn't that clear and complete and excuse me for my english.
Hope this can help someone.
Regards.
Try to avoid position absolute. This only complicates things in the long run, maintanance-wise.
Then, what you first need to do is create a more table like structure. Create two columns (your title+content and the image) and proceed from there:
-----------------------
| [TITLE] | IMAGE |
|------------| IMAGE |
| [CONTENT] | IMAGE |
-----------------------
The thing you're looking for is display: inline-block;, this allows multiple elements to be on one line (inline) and still give it dimentions (block). This does require the element to touch eachother, no spaces between them (see in the example provided below).
I've made a simple example for you
I'm not a float fan. IMO they're always complicating stuff more than they fix.
I would like to create two divs, one inside the other with equal padding on all sides of the child. Like so
<div>
<div>Foo</div>
</div>
So that the result looks like
----------------------------
| |
| |--------------------| |
| | | | <---- There is 1em padding on the inner
| | Foo | | container too
| | | |
| | | |
| |--------------------| |
| | <---- This is the window height,
---------------------------- the padding is 1em on all sides;
How do I do this in CSS?
Right now I am stuck on this layout, missing the bottom padding
With this code
<div class="more-padded full-height blue-green fixed">
<div class="more-padded full-height light-tan more-rounded light-border">Foo</div>
</div>
and style
.more-padded {
padding: 1em;
}
.full-height {
height: 100%;
}
.blue-green {
background-color: rgba(153, 204, 204, 1);
}
.light-tan {
background-color: rgba(239, 235, 214, 1);
}
.more-rounded {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
You can use box-sizing:border-box; so that the width and height properties include the padding and border
HTML
<div id="parent">
<div id="child">Foo</div>
</div>
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#parent {
box-sizing:border-box;
height:100%;
padding:1em;
background:hotpink;
}
#child {
height:100%;
background:dodgerblue;
}
Demo
Hi for equal padding use the following code.
Live demo is on http://jsfiddle.net/adarshkr/fqm83gms/5/
html
<div class="outer">
<div class="inner">
<p>Equal padding adarsh</p>
</div>
</div>
css
body{
background:#ddd
}
.outer{
background:#eee;
padding:20px
}
.inner{
background:#000;
padding:20px;
color:#fff
}
.inner a{
color:#fff;
text-decoration:none
}
Ok, now that I am on an actual computer:
I think you want this: (Js Fiddle For Reference)
body,html{
height:100%;width:100%;
}
body{
padding:1em;
}
body >div{
border:1px solid black;
}
I have a calendar and I am trying to add events to it. Each event has a style and will have a link associated with it. It seems to be doing OK when there is only one event per day, but the issue comes when I am trying to add 2 events inside a single day. I have played around with absolute and relative position but it doesn't seem to be working. I would like it to look like this:
example Image
but it actuallty looks like this: actual html
Here is my Code:
CSS
.calendarDay {
position: relative;
clear: none;
width: 14.2851%;
height: 142px;
background-image: url(images/calendarDayBG.png);
background-repeat: no-repeat;
background-size: cover;
font-family: "Stag Sans book", "Arial";
font-size: 45pt;
vertical-align: top;
color: #4d4f53;
overflow: hidden;
top: 40px;
text-align: left;
}
.calendarDay h1 {
font-family: "Stag Sans light", "Arial";
font-size: 45pt;
text-overflow:clip;
vertical-align: top;
}
/* event styles */
surgicalCare {
display: inline;
alignment-baseline:baseline;
background-color: #d75f17;
position: absolute;
}
surgicalCareStacked {
display: inline;
background-color: #d75f17;
position: absolute;
}
strategicaccounts {
display: block;
alignment-baseline:baseline;
background-color: #5e249e;
}
HTML
<li class="fluid calendarDay zeroMargin_desktop">17<a href="EAST/msn.html"><div class="fluid surgicalCareStacked">
<p>E.A.S.T.</p>
</div></a>
<a href="EAST/sponsorship_EAST.html"><div class="fluid surgicalCare">
<p>E.A.S.T.</p>
</div></a></li>
I was thinking that I may need to use different styles: one for multiple events in a day "stacked," and one with a single event...but I could be totally wrong!
Thanks!!
Your images are not available for some reason. If I understand your question correctly, this is what you are looking for:
______________________
| Parent div |
| __________________ |
| | Child div 1 | |
| | | |
| |__________________| |
| __________________ |
| | Child div 2 | |
| | | |
| |__________________| |
|______________________|
Something like this would work:
HTML
<div id="parent">
<div id="child1">
<!-- Stuff here -->
</div>
<div id="child2">
<!-- Stuff here -->
</div>
</div>
CSS
#div1 {
width: 250px; // Or whatever width you need
}
This works because divs are block elements by default, so they span the whole width of their parent element, and force other elements down.
The basic question is: How can a be shrink-to-fit over an element while itself containing other elements?
The goal is to have a (centered) menu over an (centered) image, which´s width and height shall relate to the images dimensions.
All of it being responsive, meaning no absolute sizes!
Here´s the sample code:
<div id="menu">
<img src="picture.jpg" />
<div id="left">
test1
</div>
<div id="right">
test2
</div>
</div>
#menu{
position:relative;
display: table; /*tried inline-block as well */
text-align: center;
line-height: 1;
}
#menu img{
height: 90%;
position:relative;
}
#left{
width: 46%;
background-color: #ffcdcc;
float: left;
text-align: right;
}
#clear{
clear: both;
}
#right{
width: 46%;
background-color: #324344;
float: right;
text-align: left;
}
and this is what it´s supposed to look like:
____________________________________
| |
| ------------------------------ |
| | | |
| | p i c t u r e | |
| | | |
| | | |
| | | |
| | | |
| | left <button> right | |
| | | |
| ------------------------------ |
| |
------------------------------------
The height/width ratio of the picture is always the same. It´s total size depends on the users window though.
I just can´t get the "menu" div to wrap around the and the "left" and "right" divs be positionable at the same time.
Is this even possible? I´m not even talking about browser compatibiliy yet...
See if this works: http://jsfiddle.net/sdvnh/1/
Changes:
#menu {
display: block;
}
#menu img{
height: 90%;
width: 90%;
}
I got a tag inside a :
#in .css file
div.box {
width: 50px;
height: 30px;
}
#in .html file
<div class="box">
<p>Here</p>
</div>
and it looks like this:
------------
| |
| Here |
| |
------------
but I want to put <p> at the bottom of <div>, like this:
------------
| |
| |
| Here |
------------
How?
add this
div.box {
width: 50px;
height: 30px;
position:relative;
}
div.box p{
margin:0;
padding:0;
position:absolute;
bottom:0;
}