I have a div (outer div; that's what I named it). It contains an aside now (like an inner div). I am trying to make this aside stay inside the outer div always.
Now let me give you a description about my aside:
1) It's draggable (Obviously)
2) Zoom in/Zoom out.
I am trying to make sure that the aside always stays inside the outer div even if we drag/zoom it to any extent. It's kinda working that way. But the aside upon zooming leaves the boundary of the outer div.
How can I prevent that from happening?
FYI, I ain't a CSS guy.
PS: If I change that aside into another div (let's name it inner div), the div loses it's drag-ability. It's a big deal in country side.
Help? Gracias.
HTML:
<div style="position:relative;background-color:#ffff99;">
<aside draggable="true" id="dragme" class="imgContent">
This is an aside, drag me.
</aside>
This is the parent div.
<br>
This is the parent div.
This is the parent div.
<br>
The aside should always stay inside this div.
<br>
I am trying to make sure that the aside won't zoom more than the outer div's boundary.
<br>
What should be done to acheive that?
</div>
CSS:
aside {
position: absolute;
left: 0;
top: 0;
width: 200px;
background: rgba(255,255,255,0.66);
border: 2px solid rgba(0,0,0,0.5);
border-radius: 4px; padding: 8px;
}
.imgContent
{ width:120px; height:75px; resize:both; overflow:hidden; background-color:#ffff99; padding:5px;}
Fiddle
To stay within the parent div simply add overflow:hidden; to the parent div. To adjust position and/or size of aside not to overflow the parent div you have to handle mouseup/mousemove events using javascript.
Related
I have 2 columns of divs (left and right) contained in the parent div. I want the parent div height automatically adjusts when either left or right div height expand. The problem I have now is that the height of parent div just expands when the left expand, it does not work for the right. I have height:auto for all divs.
Are there anyone have solution?
you can do this by float for example
<div class="parent" style="float:left">
<div class="child" style="float:left"></div>
<div class="child" style="float:left"></div>
</div>
You are probably using float to move the right div to the right side. Floats do not automatically adjust the parents height, you must add the following code right before the end of the parent div.
<br style="clear:both;" />
This will mark the end of all floats on the same level.
You are probably floating your divs to keep them next to each other. By doing so, you 'remove these divs from the flow', i.e. the parent does not take them as content anymore.
You can 'by-pass' this effect by giving overflow: hidden to the parent or by adding a clear div.
Example w/ overflow: http://jsfiddle.net/BramVanroy/LJTGh/
Important CSS:
#wrapper {
height: auto;
width: 77%;
margin: 20px auto;
overflow: hidden; /*THIS IS IMPORTANT */
border: 1px solid;
}
OR
Example w/ clear: http://jsfiddle.net/BramVanroy/LJTGh/1/
Important CSS:
.clear {clear: both;}
The first option needs a line more of CSS, the second one a line more of HTML and a line more of CSS.
I have a content div where all the content is located. this div has a border. I would like to place things inside this div so that this div expands if the content inside is too big. Should the items inside the content div be a "div" or a "p" and what css position should they have?
CSS:
#content{
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid #E0E0E0;
min-height: 200px;
width: 1000px;
padding: 0px 0px 80px 0px;
background-color: #fff;
}
When you set width: 1000px; it will prevent the content div from being any wider. I suspect you want min-width: 1000px; instead.
For internal content use p tags if you are creating paragraphs that only use inline html elements. If you are using block level elements then use div tags.
I can't say how you should style your internal elements because I know nothing about your design specs.
Contents of the #content div can be either p or div elements its up to you. The #content div will expand to the height of its content either way unless you have elements inside #content with a float property.
If that is that case you can do something like below to make the #content div expand its height.
<div id="content">
<div style="float:right; border:1px solid red; height:500px;"></div>
<div style="clear:both;"></div>
</div>
The important part here is the latest div with clear:both property which fixes the height of the parent element.
You should still be able to use a DIV. If you use height:auto; that should make it expand based on your content. Also I think you can use min-height:200px; and height:auto; together; With that said. I also agree with mrtsherman, if you set a width or height to a specific pixel it is going to limit you to those constraints.
Given some code like below, could someone show me how I could align the content-meta-wrapper inside of the content div at the TOP RIGHT corner and then have the content inside the content div wrap around it like in the image? The pink highlight in the image below is the content-meta-wrapper div.
<div id="content">
all the content you see except the Half BOX in the right hand side
<div id="content-meta-wrapper">
<div id="content-meta>
The right that is aligned at the TOP RIGHT of the content diva
<div>
<div>
</div>
The reason I can't just view source from the image is because the image is from how my site is now with moving some stuff around in Photoshop.
Assuming it's marked up inside of the content <div>, you just need to pass float: right; to it, and it should do the trick.
The code I used in This Example is the following:
#container { /* Pure Looks */
margin: 5px;
padding: 5px;
border: 1px solid black;
}
#floated {
height: 100px;
width: 100px;
float: right; /* This is what counts!! */
background: red;
}
See this Awesome Article about Floats - by Chris Coyer of css-tricks.com
You should use the css rules,
float:left;
float:right;
these will align your divs in the correct postion, to keep things tidy make sure to give your div's a width.
My problem is best outlined with this schematic/image which outlines how I want it to look:
!
I have a background image and 2 divs for text over the top of it (headline, and intro-text). I also have 2 divs on either side of the headline - these are for the white horizontal stripes.
My issue is that the headline is changeable in a CMS, and I want the horizontal white stripes to automatically fill up the space to the left and to the right of it, regardless of the headline's width.
I can't figure out how to make those 2 horizontal white stripes resize automatically.
Here's my HTML:
<div id="masthead">
<div id="headline-container">
<div id="left-stripe"> </div><div id="headline">{headline}</div><div id="right-stripe"> </div>
</div>
<div class="clear-both"> </div>
<div id="intro-text">{intro_text}</div>
</div>
And here's my CSS - ignore the widths specified for the left-stripe and right-stripe - they're just placeholders:
#masthead {
height: 260px;
}
div#headline-container {
width:960px;
padding:none;
}
div#left-stripe{
float: left;
background-color:#fff;
height: 3px;
width:500px;
display: inline;
}
div#right-stripe{
float: right;
background-color:#fff;
height: 3px;
width:100px;
display: inline;
}
div#headline {
text-align:right;
color: #fff;
font-size: 200%;
float: left;
display: inline;
}
div#intro-text {
text-align: left;
float: right;
width: 300px;
color: #fff;
}
Ideas? Please let me know if I can provide more detail.
I'm a bit too busy to actually test this, but this might give you some direction. i'm not sure the exact effect you're trying to achieve (see comment about finding a live demo someone made).
Regardless, this kind of fluid layout is a bit difficult to achieve reliably with straight CSS. To make it easier I would suggest making the right-stripe a static width.
This CSS solution MIGHT work... no promises.
markup
<div class="container">
<div class="headline-container">
<div class="left-stripe"></div>
<div class="headline">Headline goes here</div>
<div class="right-stripe></div>
</div>
<div class="content"></div>
</div>
CSS
//static width for right stripe
.right-stripe { width: 20px; }
.headline { width: auto; }
.left-stripe { width: auto; }
Using javascript would make it really easy though... here's how i would do it with jQuery. Again, I would make the right-stripe a static width to achieve this effect.
(same markup...)
..
js
var totalWidth = $("#container").width();
var leftWidth = totalWidth - ($("headline").width() + $("right-stripe").width());
$("left-stripe").width(leftWidth);
You can do this dynamically, with jQuery, for example. You take the full width of the 3 div's, drop the size of the inner div and assign dynamically the widths of the 2 outer div's in which the bar should repeat horizontally.
Basically, you will need:
$("#whole-div").width() - $("#inner-div").width() for the outer div's total width. Then, depending on your positioning of the inner-div, you assign values for the outer div's.
For example: whole div has 1000px, inner div has 200px and inner div is positioned 600px left. You will then assign 600px to the left div ($("#whole-div").width() - $("#inner-div").css('left')) and 200px for the right div ($("#whole-div").width() - $("#inner-div").css('left') - $("#inner-div").width()). Of course, you will then set a background-repeat property on the outer div so that the image repeats.
Hope that helps!
UPDATE CSS only fluid solution: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/1/
it uses the same background image twice, on #masthead and on #headline-container. except ton headline container the background is offset to match its left position relative to its parent element. then we only need one div.line behind it, which gets covered by the background image under the headline and copy, giving the illusion of a seamless image.
do you mean like this?: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/
<style>
div#float {
text-align: center;
float: left;
width: 150px;
height: 150px;
border: 1px solid blue;
background: gold;
}
div.content {
background: yellow;
border: 1px solid purple;
height: 150px;
}
</style>
<div id='float'>
Float text.
</div>
<div class='content'>
Content text.
</div>
<div class='content'>
Content text.
</div>
can anyone explain how the 2nd div content is on the newline ? while the 1st div is inline with div#float?
By default, divs will take up the entire width of the block. Your first one is just beginning after the floated div because that's where it can begin. Since both your content divs are block-level elements, they will take up the entire width available to them.
There are lots of ways to control this, but I'm not sure what you're after.
The second div is displayed as a block-element. Block elements have a width of 100%, so there is no room left for the first div to appear on the left size of your second div.
try switching the "display" css property to "inline-style"
The first <div class='content'> is 150px tall, the same as the #float one, so it's pushed down exactly one line. If you wanted the #float to "span" both lines, give it more height, e.g.:
div#float {
text-align: center;
float: left;
width: 150px;
height: 300px;
border: 1px solid blue;
background: gold;
}
You can try it out here.
As becomes clear with above answers, this is not an issue specific about divs. It's about something called "The flow" within html-pages.
DIV's render default as an block element, which gives it a maximum width. When you float such an element, it loses this effect. Block elements however do not automatically clear floats. Thus, the first contentdiv takes all space available next to the float. The other contentdiv starts at the newline.
It's behaving exactly as it should. The first div in the markup is floated and thus taken out of the flow. It'll take up the 150x150 slot up in the top left corner and anything that comes after it in the markup will try to squeeze in the left over space to the right of the floated div which is what the first content div does. div's are block level elements so they will take up the entire width of the available space. Unlike an inline element, they will not shrink to fit the rendered text.
The first content div will stretch out till the rightmost edge of the window. If you're wondering why the first div (float div) did not behave like a block level element, it's because it was floated, which will cause it to shrink to fit it's contents (in your case you gave it an explicit width of 150px).
Once the browser has rendered the float div and the content div, it has exhausted the left over space so it goes to the next line and starts from the very beginning of that line for the second content div.
Looks like you are trying to set up a navigation bar followed by content. If you wrap your content in a div and float that div to the left, you will stay to the right of the gold div but a column drop will occur when the browser is resized too small to accommodate them. So you need a parent div with a width for both the float and content divs. I added an 800 pixels outerwrapper div to your markup.
.....
div#contentwrapper {
float: left;
width: 550px;
}
#outerwrapper {
width: 800px;
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id='float'>
Float text.
</div>
<div id="contentwrapper">
<div class='content'>
Content text.
</div>
<div class='content'>
Content text.
</div>
</div>
</div>
.....
You might also want to use a different name than the css reserved word "float" for your divs. For more CSS float tutorials.