this is my html (for example)
<div id="wrap">
Some relative item placed item
<div id="fixed">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
</div>
here is my css:
#wrap{
float: left;
position: relative;
width: 80%;
background:#ccc;
}
#fixed{
width:inherit;
}
I want to make the second div that is 'fixed' to have same width as the first 'wrap'. I tried a lot, but i can't do it.
Is it possible to do this without any javascript?
Any suggestion..please.
here is the fiddle for this:
http://jsfiddle.net/sris/tktdf1kk/
You need to leave your width alone. Divs already expand 100% of their containing div. The reason your text is not wrapping is because it's all one word. Add the CSS:
#fixed {
word-wrap: break-word;
}
Related
I have a div with 15% Height and another div inside it with 15% height as well. Inner div has a <p> tag and this <p> tag is dropped out from the inner div but when I remove the height of the inner div everything works fine. Here is my html code and CSS code.
.header {
background-image: url("images/headerBg.jpg");
height: 15%;
width: 100%;
}
.title {
background-color: red;
float: left;
height: 15%;
}
<div class="header">
<div class="title">
<h2>Title</h2>
</div>
</div>
See below image for reference. Red thing is inner div and "Title" should be inside that Red thing but it's not html
You need to change height to min-height in .title class
.header{
background-image:url("images/headerBg.jpg");
height:15%;
width:100%;
}
.title{
background-color:red;
float:left;
min-height:15%;
}
It will give you following view (I just use background-color instead of image, you can use whatever you want).
You can remove float left and and play around with width.
This look will comes up if you will remove float left
And this look will comes up with width, I just added 100px, you can adjust it according to your requirements
I've a fixed width <div> positionned inside the body element with float:right. When I resize the window and the width of the <div> is below the width of the window no scrollbar appears.
HTML
<body>
<div>Some text content inside.</div>
</body>
CSS
div{
background : blue;
width : 400px;
float : right;
}
It's the same if I change float:right by position:absolute; right:0;.
If I add body{overflow:auto;} it's still the same.
My questions are : Why this behavior? and How can I change it?
http://jsfiddle.net/Sk7Qh/
You can never scroll further to the left than the left edge of the document (or further up then the top edge).
Content, however, can be positioned there.
This is what is happening and you can't change it.
The closest you could come would be to set a minimum width on a containing element so that the content is never positioned off the left or top edges.
e.g.
body {
position: relative;
min-width: 300px;
}
Update after comment from OP:
Then you just use an outside box around your div
<div id="outside">
<div id="inside">
Text
</div>
</div>
And CSS:
#outside {
max-width: 100%;
overflow-x: auto;
float: right;
}
#inside {
background:blue;
width: 300px;
}
See http://jsfiddle.net/Sk7Qh/6/
Better?
I´m trying to float 3 divs in different order in responsive design. In mobile version is correlative (div 1, div 2, div 3) but in desktop version I want to place the div 3 near the div 1 and the div 2 at bottom of them. I´m triying it with float, clears and so but I dont know how fix it. I share a mockup. can help me anyone? Thanks
(source: subirimagenes.com)
This is the html structure:
<div id="fondo-web">
<div id="main">
<section id="main-container" name="div1">
Random Image
</section>
<section id="cadiz-a-caballo" name="div2">
Copy Text
</section>
<section id="frm-container" name="div3">
Contact Form
</section>
</div>
</div>
In example, this is one attempt:
#main-container{
width:33%;
background-color:#856;
float:left;
}
#cadiz-a-caballo{
width:33%;
background-color:#376;
}
#frm-container{
width:30%;
background-color:#856;
float: right;
}
And other attempt with absolute positioning and margin-bottom for the father container:
#main-container{
width:62%;
background-color:#856;
float:left;
}
#cadiz-a-caballo{
width:70%;
position: absolute;
background-color:#376;
top:600px;
}
#frm-container{
width:35%;
background-color:#856;
float: right;
}
#main{
width:75%;
margin:auto;
margin-bottom: 150px;
overflow: hidden;
background-color: #343;
}
This is more or less what you want: http://jsfiddle.net/uyQzQ/1/
First of all you want to make the first div to a certain percentage of its parent:
#main-container{
width:65%;
}
This will leave space for the 3rd div to fall into later.
Then you want the second div to be the full width of the parent:
#cadiz-a-caballo{
width: 100%;
}
Finally you want to position the 3rd div in the space left to the right of the first div. To do this you need to position the parent so absolute positioning of the 3rd div will be relative to the parent, not the document:
#main{
position: relative;
}
Now, you just need to set the width of the 3rd div to the size of the space that is left, and then position it in the top right of the parent.
#frm-container{
width:35%;
position: absolute;
top: 0;
right: 0;
}
I've not included any margin between each element. You can adjust the widths to take this into account to add those margins.
The main issue with this approach is that the 3rd div needs to be the same height or shorter than div 1, otherwise as div 3 is out of the flow of the document, it will display on top of div2 as well (and any content below that too if long enough).
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
I have the following html code:
<div class="outer ui-draggable" style="position: relative;">
<div class="inner">Foo bar</div>
</div>
With this CSS:
.outer
{
background-color: #F7F085;
margin: 5px;
height: 100px;
width: 150px;
text-align:center;
vertical-align:text-bottom;
}
.outer .inner
{
display:inline;
vertical-align:middle;
height: 100px;
width: 150px;
}
I would like the inner div to fill the outer div completely - the text block should be an entire 100X150 box.
The problem is that this code doesn't produce the desired effect. The outer div is indeed the correct size, but the inner div seems to only fill a small area at the top of the outer div.
I also tried using height:inherit and width:inherit instead of specifying a size.
The problem is with the display:inline style. If you want it to behave like a normal DIV, keep it display:block. If it's display:inline it will only be as tall as the inherited line-height.
Might be because of the vertical-align style property. It is an invalid styling rule. It is only valid for <tr> <td> and <div> with display:table-cell