CSS - Div Won't Stay on Right Side of Other Div
Pretty simple set-up here, I'm just trying to get two divs to sit side-by-side. Image on the left, text on the right. For some reason, if the text is too long, it pushes the div down. I'd like to just make the cs-summary div understand that it should wrap the text in order to NOT jump down like it is:
http://jsfiddle.net/csaltyj/5Huau/
Code:
<div class="container">
<div class=开发者_Go百科"cs-image">
<img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
</div>
<div class="cs-summary">
<p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>
</div>
</div>
<div class="container">
<div class="cs-image">
<img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
</div>
<div class="cs-summary">
<p>Super short text behaves.</p>
</div>
</div>
CSS:
.container {
overflow: hidden;
border: 2px solid #0f0;
width: 400px;
margin-bottom: 1em;
}
.cs-image {
float: left;
border: 2px solid red;
}
.cs-summary {
font-size: 0.8em;
border: 2px solid blue;
float: left;
margin-left: 1em;
}
As you can see from the second container below, the short text works just fine. I don't want to hardcode any pixel or em values for how wide the text is, I just want it to conform and "know" its bounds.
Thanks in advance.
If your div.cs-summary doesn't have a set width it will take up as much space as it can
http://jsfiddle.net/hunter/5Huau/7/
.cs-summary {
width: 180px;
...
}
or you could remove the wrapping inner div elements and just do this:
http://jsfiddle.net/hunter/5Huau/11/
HTML
<div class="container">
<img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
<p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>
</div>
<div class="container">
<img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
<p>Super short text behaves.</p>
</div>
CSS
.container {
overflow: hidden;
border: 2px solid #0f0;
width: 400px;
margin-bottom: 1em;
}
.container img {
float: left;
border: 2px solid red;
}
.container p {
font-size: 0.8em;
border: 2px solid blue;
margin-left: 1em;
}
Have you considered not using floats at all, or do you have to support versions of IE before 8?
.container {
border: 2px solid #0f0;
width: 400px;
padding-bottom: 1em;
}
.container > div {
display: table-cell;
vertical-align: bottom;
}
.cs-image {
border: 2px solid red;
}
.cs-summary {
font-size: 0.8em;
border: 2px solid blue;
padding-left: 1em;
}
Remove the float:left from .cs-summary...
And probably use a margin-right: 5px or something on the .cs-image to get a space between them.
When floated left or right (as your example shows), DIV tags will auto expand to the content within them. You can do two things to solve your problem:
- Define a width on the div which contains your text
- Instead of wrapping your text with a div tag and a paragraph tag (
<div><p>text here</p></div>), remove the DIV from around the paragraph tag and add afloat:leftto the paragraph tag. For example:<p style="float:left;">text here</p>"
as hunter and user 671670 have pointed out, you have to use a width. Both elements must fit into the container in order to be displayed next to each other. You could change your HTML and place the image inside the text and float it left, like this:
<p>Texty text text McTexterson likes to text.
Why is div getting shoved down?<img style="float:left" ... /></p>
here is your code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.container {
overflow: hidden;
border: 2px solid #0f0;
width: 10px;
margin-bottom: 1em;
width: 400px;
}
.cs-image {
float: left;
border: 2px solid red;
}
.cs-summary {
font-size: 0.8em;
border: 2px solid blue;
margin-left: 1em;
}
</style>
</head>
<body>
<div class="container">
<div class="cs-image">
<img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
</div>
<div class="cs-summary">
<p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>
</div>
</div>
<div class="container">
<div class="cs-image">
<img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
</div>
<div class="cs-summary">
<p>Super short text behaves.</p>
</div>
</div>
</body>
</html>
Just remove float right from cs-summary.
加载中,请稍侯......
精彩评论