following problem:
I have 3 divs.
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
And I want to place them in the following order:
DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
........DIV3
........DIV3
........DIV3
One div on the left and 2 divs on the right underneath.
When I give the first two divs a float: left it looks like this:
DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
DIV3
DIV3
DIV3
With "clear: left; float: right;" on the third div i get this:
DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
.....................................DIV3
.....................................DIV3
.....................................DIV3
div 3 is here on the bottom of the page;
How can I place the last div underneath the second one?
Kai
Working jsFiddle Demo
Change your markup. Add div1 to one element, and div2 and div3 to another one:
<div class="left">
<div id="div1">
<p>DIV 1</p>
<p>DIV 1</p>
<p>DIV 1</p>
<p>DIV 1</p>
</div>
</div>
<div class="right">
<div id="div2">
<p>DIV 2</p>
<p>DIV 2</p>
<p>DIV 2</p>
<p>DIV 2</p>
</div>
<div id="div3">
<p>DIV 3</p>
<p>DIV 3</p>
<p>DIV 3</p>
<p>DIV 3</p>
</div>
</div>
Then float left and right:
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
Try this jfiddle, 2 columns with float and divs in it
http://jsfiddle.net/AnFPa/1/
<div style="float: left;">
<div>div1</div>
</div>
<div style="float: left;">
<div>div2</div>
<div>div3</div>
</div>
<div id="div4">
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
</div>
Give div 4 a width and float div 3 right.
try using clear left :
<div 3 style="clear:left" ></div>
or you can have both divs inside a container and float the bottom row to the right:
<div>
<div id="1" style="float:left"></div>
<div id="2" style="float:left"></div>
<div style="clear:both"></div>
<div id="3" style="float:right"></div>
</div>
<html>
<body>
<div style="height: 100px; Width: 200px;"> <!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;">
</div>
<div style="float:left; height: 50px; Width:100px; background-color:blue;">
</div>
<div style="float:right; height: 50px; Width:100px; background-color:green;">
</div>
</div>
</body>
</html>
Related
I have an h4 nested in 2 divs like so
<div id="my-team-lineup" style="text-align:center">
<div id="myteamDiv" style="width:100%; ">
<div id="myTeamBeforeDiv" style="width:50%; float: left;">
<center>
<h4>Before Trade</h4>
<div class="tableRow header blue" id="statTable0">
<div class="cell">Pos</div>
<div class="cell">Players</div>
<div class="cell">Opp</div>
<div class="cell">Proj Pts</div>
</div>
<div class="tableRow">
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text</div>
</div>
<br />
<h4>Week At Bottom</h4>
</center>
</div>
</div>
I want to have this h4 sticky to the bottom of the page. I have tried every combination of position and bottom I can think of and nothing is working. Just a note as I have an exact replica of this that takes up the other 50% of the page, and the height of the divs can be different due to content.
First, you didn't closed all divs in your code. correct it.
You can set position as fixed and bottom as 0.
HTML
<h4>text</h4>
CSS
h4{
position: fixed;
bottom: 0;
}
https://jsfiddle.net/xxfhqv36/
1)
<div class="testimonials">
<div class="content">
<p>Content ONE</p>
<p>Content TWO</p>
<p>Content THREE</p>
</div>
</div>
<div class="other-content">
<p>Content Here</p>
</div>
2)In above code i have give position:absolute to <p></p> tag, so the other-content class content is not displayed under the content class.
3)I need other-content content will be displayed below the other-content class.
4)please don't use height, solve the issue.
5)Please check the below link.
6)Here is the fiddle.
Thanks in advance.
remove the position from .content p
try this..
.content p{
width: 50%;
background-color: #eee;
float: left;
padding: 15px;
}
FIDDLE
Wrap the both divs (testimonials and other-content) in an extra wrapper div and then set position:absolute on that wrapper.
FIDDLE
.wpr {
position: absolute;
}
<div class="wpr">
<div class="testimonials">
<div class="content">
<p>Content ONE</p>
<p>Content TWO</p>
<p>Content THREE</p>
</div>
</div>
<div class="other-content">
<p>Other Content Here</p>
</div>
</div>
HTML:
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
SCSS:
.item{
background-color:skyblue;
#for $i from 1 through 4{
&:nth-child(#{$i}){
margin-left:$i * 10px;
}
}
}
The nth-child(3) doesn't select that.
I try to use nth-of-type, but it's only take nth-of-type(1).
Do I need to add a class in every .item ?
The correct way is to use the space since you are talking about children and not siblings
div div div {}
div div div{
background: red
}
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
To use nth-child you will have to change the markup structure
div:nth-child(3){
background: red
}
<div class="item">
首页
</div>
<div class="item">
项目
</div>
<div class="item">
招贤
</div>
<div class="item">
联系
</div>
I have a jsfiddle here - http://jsfiddle.net/7psczxog/5/
It's just two blocks that contain an image and some text in two separate divs.
At smaller sizes the image and text sit on top of each other.
Each block also has a triangle that should site in the middle at the bottom of the block.
My problem is the blocks only work at smaller sizes when the image is on top of the text.
At larger sizes the block has no background color and the triangle moves to the top.
<div class="container">
<div class="row">
<div class="testimonialBlock triangle-section clearfix block0">
<div class="col-sm-4">
<img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
</div>
<div class="col-sm-8">
<h4>Trader Testimonial 1</h4>
<h5>Trader Testimonial By 1</h5>
<p>Trader Testimonial Text 1</p>
</div>
</div><!--testimonialBlock-->
</div>
<div class="row">
<div class="testimonialBlock triangle-section clearfix block1">
<div class="col-sm-4">
<img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
</div>
<div class="col-sm-8">
<h4>Trader Testimonial 2</h4>
<h5>Trader Testimonial By 2</h5>
<p>Trader Testimonial Text 2</p>
</div>
</div><!--testimonialBlock-->
</div>
Is this what you are looking for?
http://jsfiddle.net/prsne4a7/
HTML:
<div class="container">
<div class="triangle-section-row row">
<div class="testimonialBlock triangle-section block0">
<div class="col-xs-4">
<img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
</div>
<div class="col-xs-8">
<h4>Trader Testimonial 1</h4>
<h5>Trader Testimonial By 1</h5>
<p>Trader Testimonial Text 1</p>
</div>
</div><!--testimonialBlock-->
</div>
<div class="triangle-section-row row">
<div class="testimonialBlock triangle-section block1">
<div class="col-xs-4">
<img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
</div>
<div class="col-xs-8">
<h4>Trader Testimonial 2</h4>
<h5>Trader Testimonial By 2</h5>
<p>Trader Testimonial Text 2</p>
</div>
</div><!--testimonialBlock-->
</div>
</div>
CSS:
.triangle-section-row{
background: red;
margin: 0 0 50px 0;
position: relative;
}
.triangle-section:after{
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: red transparent transparent transparent;
bottom: -20px;
left: 50%;
content: "";
height: 0;
margin-left:-20px;
width: 0;
position: absolute;
}
I just bumped the position: relative to the parent of .triangle-section and used col-xs-* instead of col-sm-* to keep the columns consistent across all client widths. col-sm-* only enforces the columns when the client area width is greater than 768px.
See the Bootstrap grid documentation for more information about the responsive grid:
http://getbootstrap.com/css/#grid-options
<div style="float:left">
<div class="designerWrapper">
<div class="pageBox">
content
</div>
</div>
</div>
<div style="float:left; margin-left:10px;">
content 2
</div>
<div style="clear:both"></div>
<br /><br />
How do I make the div that holds content 2 100% width? If I set it to 100% width it is too wide, at the moment it expands with it's contents length.
you sould use the table stuff
<div id="outer1">
<div id="outer2">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
css:
#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}
important there is no floating! because the table display floats the cells automatically.
i didnt test the code hope works.
You can set min-width depend upon your requirement.
later on it will expand with its content
<div style="float:left; margin-left:10px;min-width:110px;">
content 2
</div>