I am having an issue with a horizontal layout: http://jsfiddle.net/GqH6s/4/
It seems the parent #content div gets its width from its first child (#projects), not the total of all its children.
I know I could work around it with jQuery but I'd like to use CSS if possible.
Thanks for your help!
The basic html:
<div id="content">
<div id="projects" class="section">
<div class="block">Content</div>
</div>
<div id="profile" class="section">
<div class="block">Content</div>
</div>
<div id="team" class="section">
<div class="block">Content</div>
</div>
</div>
And CSS:
#content {
white-space: nowrap;
display: inline-block;
}
.section {
display: inline-block;
}
.block {
white-space: normal;
}
You need to place the #profile and #team div's within the #project div so that they appear inline with the rest of the sections.
Should looks something like this:
Related
I'm struggling with Bootstrap rows and columns in a SharePoint web site. The problem is that I can't and don't want to change the styling that originates from SharePoint, but still be able to use the Bootstrap grid in a part of the page.
I've tried to illustrate the problem without Bootstrap and SharePoint. Here's the JSFiddle:
https://jsfiddle.net/knLjyhe4/
Below is a complete illustration of my example. The problem is that once I use a row to separate element B from C, D and E, the height of side element A affects the first row's height, which I don't want. I want element C to appear immediately below element B. The second example is how it looks before I add the div.row elements.
Below is the HTML and CSS for the isolated example. I had hoped that I could style the div.main element somehow so that the float of A doesn't affect the float of B-E at all. But I can't figure it out.
Please note that I'm sure there are several solutions if I start to change the HTML and styles (like using position), but I really just want to know if there is a way in CSS where the div.main element gets "its own" floating area, without being affected by the A element's float.
<style>
section {
width: 600px;
margin: auto;
}
.block {
float: left;
margin: 10px;
background-color: #339;
color: #fff;
width: 140px;
padding: 10px;
}
.side {
width: 200px;
height: 100px;
}
.main {
margin-left: 240px;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
</style>
<section>
<div class="side block">This is element A in problematic example. I want element C immediately below element B, regardless of the height of this element</div>
<div class="main">
<div class="row">
<div class="block">This is element B</div>
</div>
<div class="row">
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
</div>
</div>
</section>
<section>
<div class="side block">This is element A when it works but without rows</div>
<div class="main">
<div class="block">This is element B</div>
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
<div class="block">This is element F</div>
<div class="block">This is element G</div>
<div class="block">This is element H</div>
<div class="block">This is element I</div>
</div>
</section>
Seems to be working if you change your CSS for .main to this (display: table-row;):
.main {
margin-left: 240px;
display: table-row;
}
Updated JSFiddle here
UPDATE 1
Changed table to table-row since it did not work in IE10.
UPDATE 2
For future reference, the final solution used in SharePoint / O365 looked something like this:
HTML (.container is a bootstrap container)
<div id="DeltaPlaceHolderMain">
<div class="container">
<div class="inner-container">
<!--Your content here-->
</div>
</div>
</div>
CSS
.container .inner-container {
display: inline-block;
width: 100%;
}
The .main needs to be float:left and it needs to have less px to width.
Try defines
.side {width:30%; float:left;}
.main{width:70%; float:left; margin-left:0; }
Don't forget to clean the margin-left of .main
The clear: both property on the row:after pseudoclass is causing your second row to jump down below the left-floated side element.
In bootstrap you should use classname col-md-4 on your side element, classname col-md-8 on your main element, and remove the float: left property from your side element. This will give you 2 columns, one for side which is 4 grids wide and one for main which is 8 grids wide. Your rows should function as you expect once the float is gone.
<style>
section {
width: 600px;
margin: auto;
}
.block {
background-color: #339;
color: #fff;
padding: 10px;
}
</style>
<section class="row">
<div class="block col-md-4">This is element A</div>
<div class="col-md-8">
<div class="row">
<div class="block col-md-6">This is element B</div>
</div>
<div class="row">
<div class="block col-md-6">This is element C</div>
<div class="block col-md-6">This is element D</div>
<div class="block col-md-6">This is element E</div>
</div>
</div>
</section>
In general, with bootstrap you don't want to float things. Also, instead of setting element widths explicitly, it is better to use the .col- classes to fit them into the bootstrap grid system.
I have this structure:
<div clas="page_cat_list">
<div class="page_cat_row">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="clear_fix"></div>
</div>
<div class="page_cat_row">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="clear_fix"></div>
</div>
</div>
this displays 3 items in a row, but I need the page_cat_list 100% width, and as many items they fit in the row dinamically.
I used:
.clear_fix {
display: none;
}
that`s ok, and
.page_cat_row{
display: inline;
}
this way I have as many items as they fit in the row, but they are aligned left, I tried:
.page_cat_row, page_cat_list {
text-align: center;
}
but is not working
the best solution should be to eliminate the .page_cat_row element, from CSS if possibile, because I have no access to html.
It is supposed to behave like this:
<div clas="page_cat_list">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
</div>
.page_cat_item is a div and by default 100% width so you need to center align content inside this div not the whole this
.page_cat_item {
text-align: center;
}
Also the css you were using is having an error
.page_cat_row, page_cat_list {
text-align: center;
}
In your above css you need to define . for both classes not just for first
This is correct
.page_cat_row, page_cat_list {
text-align: center;
}
I am creating a simple css chart responsive that works on any browser.
This is my code:
<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;float:left;"></div>
<div style="width:10%;height:40%;background:#00ffff;float:left;"></div>
<div style="width:10%;height:80%;background:#00ffff;float:left;"></div>
</div>
But as you can see, the chart is inverted:
http://jsfiddle.net/xkd6twsq/
I tried with:
position:relative;
bottom:0px;
but doesn't work:
http://jsfiddle.net/xkd6twsq/1/
Use display: inline-block instead of float. The parent needs display: table-cell and vertical-align to align graph to bottom.
<style>
div {
display: table-cell;
vertical-align: bottom;
}
div div {
display: inline-block;
width: 10%;
background: #0ff;
}
</style>
<div style="width:500px;height:300px;">
<div style="height:20%;"></div>
<div style="height:40%;"></div>
<div style="height:80%;"></div>
</div>
http://jsfiddle.net/xkd6twsq/4/
The problem is the float:left, using display: inline-block will get what you want:
<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:40%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:80%;background:#00ffff;display:inline-block;"></div>
</div>
All about floats from CSS-tricks explains when to use floats and this display types answer details why floats are not the best option.
I have two div tags:
<div id="parent">
<div id="content">
//content
</div>
</div>
the content of the <div id="content"> is added dynamically so I don't know its width and I can't set width and margin to it.
How can I center align <div id="parent"> content?
PS: I don't want to use javascript to do this.
Try this:
#parent {
text-align: center;
}
#content {
display: inline-block;
}
You can use text-align property.
#parent {
text-align: center;
}
I wonder if any one can help me. I have a website with a header, footer and content containers. Now I wish to vertically centre the content between the header and footer containers instead of the page. Does anybody have any ideas how to achieve this???
try the below css
<div >header</div>
<div class="container">
<p>This small paragraph...</p>
</div>
<div >footer</div>
CSS:
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle ;}
try the below css
<div class="wrapper">
<div >header</div>
<div class="container">
<p>This small paragraph...</p>
</div>
<div >footer</div>
</div>
CSS:
.wrapper{ display: table; }
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle ;
}
Try this i just added wrapper with display:table style.
table-cell property will work only with a wrapper having display:table property