hello all I have three div and parent div have white-space:nowrap when I write large text inside child div all wards is only one line, how can I solve this problem without using white-space:normal for child div
here is html
<div class="history_slider">
<div class="img">
<img src="img/pic/nemiroff.jpg"/>
<div class="img_text">
which suggests that it formed from nebulous material in space. The hypothesis offers explanations for some of the Solar System's properties, including the nearly circular and coplanar orbits of the planets, and their motion in the same direction as the Sun's rotation. According to the hypothesis, Sun-like stars form over about 100 million years, in massive, grav
</div>
</div>
</div>
here css
.history_slider{
position:relative;
width:100%;
height:100%;
/* outline:1px solid #d6d7db; */
overflow:hidden;
white-space: nowrap;
}
.history_slider .img{
margin-left:125px;
margin-right:125px;
width:700px;
height:500px;
display:inline;
}
.img_text{
float:left;
width: 100%;
height: 110px;
}
Related
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
I couldn't seem to find a reference to this problem anywhere after lengthy searching. This probably means I am missing basic concepts but I am going to go ahead and ask anyway. I am trying to have a float:left <div> overlay a background image. A simplified version of the problem is below (with a div representing the image for quick reproducibility)
<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
BACKGROUND DIV
</div>
<div style='float: left; background-color: yellow; width: 100px; height: 100px'>
FLOATING IMAGE
</div>
It seems the absolutely positioned div overlays the float. How do I sort this out - without resorting to the background-image property of the parent (this is not an option) ?
Set position:relative; on the floating element and assign a z-index:1; to the background and z-index:2; to the floating image.
<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
BACKGROUND DIV
</div>
<div style='position:relative; float: left; background-color: yellow; width: 100px; height: 100px; z-index:2;'>
FLOATING IMAGE
</div>
EDIT: here's a jsfiddle for your reference: http://jsfiddle.net/exUm7/1/
Div overlay is not a good idea other than if you are doing game kind of thing. I think is batter if you plan your layout as much as without overlay. It will make you easy.
but if you must need to do this. Here we go
<div style='float:left; background-color:blue; width:500px; height:500px; z-index:1'>
BACKGROUND DIV
</div>
<div style='float:left; margin-left:-500px; background-color:yellow; width:100px; height:100px; z-index:2'>
FLOATING IMAGE
</div>
I have this image that I would like use as a border.
There are 3 inline columns and there will be 2 of these images that separate the center column from the right and left columns.
I can use the css border property but it doesn't look right as the border passes the image on the top, bottom and through the center. Can this be done and if so, how can I do it?
The thing to keep in mind is that if the center columns grows, the image will need to grow in height with it. I want to stay away from setting a height on the page.
EDIT:
Is there a way to get these borders to grow in height if either the side columns or center columns grow?
<style>
#col1{
display:inline;
float:left;
width:100px;
border:1px solid
}
#col2{
display:inline;
float:left;
width:300px;
border:1px solid
}
#col3{
display:inline;
float:left;
width:100px;
border:1px solid
}
</style>
<div id="col1">1</div>
<div id="col2">2</div>
<div id="col3">3</div>
Where you see the borders now, they should be replaced with this image but the image should grow with the tallest column, whichever one that may be.
To use an image border:
img {border-left: 1px solid #ccc;}
/* assuming that the image is right and you need a border to the left. */
From the comments, tried this...
HTML
<div class="wrap">
<div class="left"><textarea></textarea></div>
<div class="right">
<img src="http://i.imgur.com/Dhu0f.jpg" alt="grow" />
</div>
</div>
CSS
.wrap {overflow: hidden; height: auto;}
.left, .right {float: left; height: 100%;}
.right img {height: 100%; width: auto;}
Fiddle: http://jsfiddle.net/N2bVR/
Update:
The best option for your question would be, running the border image as a background image to the body and give a repetition on y axis.
I've dealt with divs collapsing on their content when using float positioning (e.g. solving with overflow:hidden), but am trying to learn absolute/relative positioning and can't figure out why the container div is collapsing. My test case:
<html>
<head>
<style type="text/css">
body {
background-color:#eee;
}
#content {
margin:0 auto;
position:relative;
border:1px solid red;
width:800px;
display:block;
background-color:white;
}
#header {
border:1px solid black;
background-color:#777;
color:white;
width:800px;
position:absolute;
left:0;
top:0;
}
#leftcol {
position:absolute;
border:1px solid black;
background-color:#ddd;
width:200px;
top:100px;
left:0;
}
#rightcol {
position:absolute;
top:100px;
left:205px;
border:1px solid black;
background-color:#ddd;
width:500px;
}
</style>
<title>CSS Positioning Example 1</title>
</head>
<body>
<div id="content">
<div id="header">
<h1>The Awesome Website</h1>
</div>
<div id="leftcol">
<h2>About</h2>
<p>
This website is so awesome because it was made by someone
and that is really all there is to it. There.
</p>
</div>
<div id="rightcol">
<p>This is where I'm going to put some real body text so that it goes
on and on for a while and so I can get a sense of what happens when
the text in the paragraph keeps going and the box containing it keeps
going on as well.
</p>
</div>
</div>
</body>
</html>
What's going on here? Why does the red-bordered content div collapse even though it contains the other divs?
It is because all of its content is styled as position:absolute. This takes those elements out of flow and (layout-wise) it's like they don't even exist. Consider using position:relative to position the content.
You really need to read these articles at A List Apart
CSS Positioning 101
CSS Floats 101
Your question is why the div with red borders don't expand to it's content. As Joseph said the problem is that you take the elements out of the document flow. Positioning an element absolutely make the element's position independent from it's parent and siblings.
I fixed your code using CSS float property. Take a look here.
I highly recommend you read those articles.
I have a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.
I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.
How should I fix this?
It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top
Another option (or as well as) is to set the line-height to the desired height rather than the height.
If you have no luck with these, I suggest you put your html and css up on jsfiddle.
Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.
CSS Code
#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}
HTML Code
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner" style=" margin:0;"></div>
</div>
Here's a working solution. http://jsfiddle.net/j3zjg/
<style>
#container{
width:500px;
height:300px;
border:1px solid red;
}
#container div{
width:30%;
float:left;
height:40px;
background:red;
margin-right:5px;
}
</style>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>