I have 8 divs and I have them all floating left because I'd like them to all be in the same row and overflow out of their container. For some reason they're in pairs, I'm not really sure why. Here is the jsfiddle http://jsfiddle.net/wp9jB/
here is the code:
.standard_containers {
width:275px;
padding-top:15px;
padding-right:10px;
padding-left:10px;
padding-bottom:15px;
float:left;
margin-left:7px;
margin-right:7px;
}
<div style="width:690px;border:1px solid red;position:relative;">
<div class="standard_containers shadow gradient_2">
<p class="head_med_blue">Physical Thearpy Protocols</p>
</div>
<div class="standard_containers shadow gradient_2">
<p class="head_med_blue">Physical Thearpy Protocols</p>
</div>
<div class="standard_containers shadow gradient_2">
<p class="head_med_blue">Physical Thearpy Protocols</p>
</div>
<div class="standard_containers shadow gradient_2">
<p class="head_med_blue">Physical Thearpy Protocols</p>
</div>
<div class="standard_containers shadow gradient_2">
<p class="head_med_blue">Physical Thearpy Protocols</p>
</div>
<div class="standard_containers shadow gradient_2">
<p class="head_med_blue">Physical Thearpy Protocols</p>
</div>
<div class="standard_containers shadow gradient_2">
<p class="head_med_blue">Physical Thearpy Protocols</p>
</div>
<div class="standard_containers shadow gradient_2">
<p class="head_med_blue">Physical Thearpy Protocols</p>
</div>
<br style="clear:both;" />
</div>
They are in pairs because your <div> has a width of 690px. Set it to 320px for all items in one "column" - to 2500px for all items in one "row".
If the div must have width of 690px, <div style="width:320px;border:1px solid red;margin-right:370px;">
If you want all 8 elements to fit into that div all on the same line, then you are going to have to decrease the size of the .standard_container class
<style type="text/css">
.standard_containers {
width:60px;
padding:15px 6px;
float:left;
margin:0 7px;
}
</style>
I used short hand, instead of having padding-top, padding-bottom, margin-top, etc, the first number is top & bottom, and the second number is right & left.
Related
This is driving me nuts. I'm probably overlooking something super simple since I normally don't have issues with something like a psuedo-class.
I'm trying to remove the right border on a div element for the last-child. I can have it work with a class on the last element, but I don't need to do it that way (since the content will be in an ee loop).
Here is the code. Everything is wrapped in a section with an id of #small-featured. All the content that is nested in bootstrap columns is wrapped in a #featured-wrapper.
<section id="small-featured">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/36-6022.png" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/36-5100.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/46-455.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/unisaw.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
</div>
</div>
</section>
Here is CSS
#small-featured {
text-align: center;
}
#small-featured img {
width: 250px;
padding: 0 15px;
}
.featured-wrapper {
border-right: 1px solid #eee;
}
#small-featured .featured-wrapper:last-child {
border-right: none;
}
All the borders disappear when I add my last bit of CSS. I've tried targeting just .featured-wrapper:last-child as well.
Any ideas?
#small-featured .col-md-3:last-child .featured-wrapper {
border-right: none;
}
(All .featured-wrapper are :last-child.) ¯\_(ツ)_/¯
How to display scroll bar when overflow if display:table ?
Sample code:
https://jsfiddle.net/mvnvnk5z/
html:
<div class="chatpanel">
<div id="chatcontent">
<p class="userchat">hello</p>
<p class="userchat">hello2</p>
<p class="userchat">hello3</p>
<p class="userchat">hello4</p>
<p class="userchat">hello5</p>
<p class="userchat">hello6</p>
<p class="userchat">hello7</p>
<p class="userchat">hello8</p>
</div>
</div>
css:
.chatpanel{
display:table;
table-layout:fixed;
overflow-x:hidden;
overflow-y:auto;
height:50px;
width:50px;
}
#chatcontent {
display:table-cell;
}
thanks
Change overflow-y:auto; to overflow-y:scroll; if you're looking forward to have scroll on overflowed content in y-axis, you can follow the same pattern for x-axis, here's the sample code;
Scroll
Use this code Check here
<div class="chatpanel">
<div id="chatcontent" style="overflow-y:auto;height:100px;">
<p class="userchat">hello</p>
<p class="userchat">hello2</p>
<p class="userchat">hello3</p>
<p class="userchat">hello4</p>
<p class="userchat">hello5</p>
<p class="userchat">hello6</p>
<p class="userchat">hello7</p>
<p class="userchat">hello8</p>
</div>
</div>
Enjoy...!
I'm using bootstrap framework for a project, but I'm having trouble with a central div for my site.
I need to put a div vertically centered but with a background color for 100% full width, and inside the container div of bootstrap.
I need to build the blue part (Central DIV) of the image http://www.hmsg.net/layout.png
use this
<div class="col-lg-12" style="background: url("../img/Bg.png"); background-size: 100% auto; height:100%;">
<div class="col-lg-12" style="hieght:500px; padding:0px; margin:0px;">
</div>
<div class="col-lg-12" style="background-color:#ffffff; hieght:500px; padding:0px; margin:0px;">
</div>
</div>
Try this
<div class="col-lg-12"
style="padding:0px; background-image: url('http://www.kiteworldmag.com/media/wallpapers/2/187/3.jpg'); background-size: 100% auto; height:500px;;">
<div class="col-lg-12" style="height:300px; padding:0px; margin:0px; display: block">
</div>
<div class="col-lg-12" style="background-color:#ffffff; height:100px; padding:0px; margin:0px;">
sdfsdf
</div>
</div>
Thanks Harutyun, for your answer,
I've ended with this solution:
<div style="margin:0; padding:0px; width:100%; height:100%; display:table">
<div style="display: table-cell; vertical-align: middle;" >
<div style="background:#99FF33">
<div class="container">Content Goes Here.</div>
</div>
</div>
</div>
Given the following code
<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
<div style="display:table-row;border:solid 1px blue">
<div style="display:table-cell;border:solid 1px green;height:100%">
<div style="height:100%;background:yellow;overflow-y:auto">CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
</div>
</div>
</div>
<div style="display:table-row;border:solid 1px blue">
<div style="display:table-cell;border:solid 1px green;height:100px">
<div>INPUT</div>
</div>
</div>
</div>
Chrome correctly sizes the CONTENT area by the available size for the table cell while Firefox and IE increase the size of the table cell to fit the content.
How can I make FF/IE behave like Chrome?
Example in Fiddle:
http://jsfiddle.net/2p6Jx/
UPDATE : I cannot use fixed height, the table should change according to it's parent element height and width
Update 2: adding display:-moz-stack solved the issue in FF, now it is just IE (http://jsfiddle.net/2p6Jx/3/)
I change your code and it works in IE/FF/chrome.
<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
<div style="display:table-row;height:300px;width:100%;">
<div style="display:table-cell;">
<div style="background:yellow;overflow-y:auto;height:300px;">
CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
</div>
</div>
</div>
<div style="display:table-row;height:100px;width:100%;">
<div style="display:table-cell;border:solid 1px green;height:100px">
<div>INPUT</div>
</div>
</div>
</div>
</div>
I've been going through documentation, tutorials and examples. But I can't seem to get these 4 boxes to align properly no matter what I do.
div#frontpage{width:100%; }
div#1{width:25%; float:left; position:relative;}
div#2{width:25%; float:left; position:relative;}
div#3{width:25%; float:right; position:relative;}
div#4{width:25%; float:right; position:relative;}
.clear{clear:both;}
<div id="frontpage">
<div id="1">
</div>
<div id"2">
</div>
<div id="3">
</div>
<div id="4">
</div>
<div class="clear">
</div>
</div>
This is what I came up so far and the closest result I want to achieve. Get them to all align horizontal straight across one row. The reason why I use % instead of px is because my wordpress theme is responsive.
Just tweaked it a bit and it works fine.
CSS
div#frontpage{width:100%; }
div.box{width:25%; float:left; position:relative;}
.clear{clear:both;}
HTML
<div id="frontpage">
<div class="box">
a
</div>
<div class="box">
s
</div>
<div class="box">
d
</div>
<div class="box">
f
</div>
<div class="clear">
</div>
</div>
As mentioned by Phil, Ids should not be numbers. Also, your <div id"2"> should have been <div id="2"> (missing '=' sign)
see this working example http://jsfiddle.net/QFMXx/
change Id's in your code. Id's shouldn't start with digits
<div id="frontpage">
<div id="d1">sfdfs
</div>
<div id="d2">dfsdf
</div>
<div id="d3">dsfsdf
</div>
<div id="d4">dfsfsd
</div>
<div class="clear">sdfsd
</div>
</div>
and css:
div#frontpage{width:100%; }
div#d1{width:25%; float:left; position:relative;}
div#d2{width:25%; float:left; position:relative;}
div#d3{width:25%; float:right; position:relative;}
div#d4{width:25%; float:right; position:relative;}
.clear{clear:both;}
I have modified your code little bit and got the result. Could you please try this?
<style>div#frontpage{width:100%; height:50%;border:1px solid red }
div.s1{width:25%; height:50%;float:left; position:relative;border:1px solid blue;clear:both}
.clear{clear:both;}
</style>
<div id="frontpage">
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="clear">
</div>
</div>
</div>
Hope this helps.
--Felix
Id must not start with a number. and maybe you can use the following style
<style>
div#frontpage{width:100%;background-color:#ccc; }
div#a1{width:25%; float:left; position:relative;background-color:red;margin-right:75%;}
div#a2{width:25%; float:left; position:relative;background-color:#ffccea;margin:0 50% 0 -75%}
div#a3{width:25%; float:right; position:relative;background-color:blue;margin:0 25% 0 -50%}
div#a4{width:25%; float:right; position:relative;background-color:yellow;margin:0 0 0 -25%}
.clear{clear:both;}
</style>
I used a margin to the right to push away all the elements and a negetive margin to the left to pull up my desired elements.
div#frontpage{width:100%; position:relative;}
div#a{width:25%; float:left; }
div#b{width:25%; float:left; }
div#c{width:25%; float:right;}
div#d{width:25%; float:right;}
.clear{clear:both;}
<div id="frontpage">
<div id="a"></div>
<div id"b"></div>
<div id="c"></div>
<div id="d"></div>
<div class="clear"></div>
</div>
I am not sure,