i have added the bootstrap cards(in the image below) everything is working fine. but the problem is when i add a side bar and nav bar(actually another file,i included it with php). cards which are left side of the screen gets hidden under side bar.
if i write the following css ,then it takes 200px margin for every card.
what i want is only cards which are on the left side needs to be move towards left and the gap between each card must remain same.
i also tried frames but not working.
.cards{
margin-left:200px;
}
I am not sure how your html looks like, but lets assume it is like this:
<div class="content">
<aside> ... menu </aside>
<main> ... cards </main>
<div>
You can write css like this:
.content { display: flex }
aside { width: 200px }
main { width: calc(100% - 200px) }
I hope i understood the question.
Related
So I am trying to create a responsive CSS for two divs. The first div is for the summary and the second div is for the summary description. How can I make the second div to be right underneath the first div while having the second div to get wrapped if the content in the second div exceeds the width of the first divs?
div.firstdiv {
padding: 60px 0;
}
div.seconddiv {
padding: 30px;
text-align: center !important;
}
<div class="firstdiv">This is a test for customer issues & solutions
<div class="seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>
The answer to your question is in the question itself. This is how elements behave naturally. There is no need to have your second div be inside your first, just have them as siblings, like so:
<div class="firstdiv">
This is a test for customer issues & solutions
</div>
<div class="seconddiv">
We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>
And your CSS:
.firstdiv, .seconddiv {
width:100%; // or whatever you'd like the width to be
margin:10px // again, whatever you'd like.
}
By default, the seconddiv element will show below the firstdiv element, the widths will be equal, and the text will wrap.
Side note, you should wrap the text in a p tag or similar instead of just having it floating inside your div.
You can try something with display grid, if you are willing to have a fixed size in the first div.
The solution is having both divs within the same wrapper and use CSS Grid in the wrapper div. Like this:
div.grid{
display: grid;
grid-template-columns: minmax(min-content, 300px);
grid-gap: 10px;
}
<div class="grid">
<div class="firstdiv">
This is a test for customer issues & solutions
</div>
<div class="seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>
</div>
This question already has answers here:
CSS floats, change order on mobile layout?
(5 answers)
Closed 9 years ago.
I have two divs whereas (div 1) is floated left while (div 2) is floated right. I am creating a responsive layout where when the viewport changes, (div 1) will go under (div 2). I created a simple image via MS Paint for an easier illustration and also some code. Also, both contain dynamic content so their heights must not be fixed.
No javascript (if possible) just plain CSS. I only know how to put div 2 under div 1 but not the other way around.
Does anyone know how I could achieve this?
HTML:
<div id="div1 sidebar" style="float: left;">
//dynamic content
</div>
<div id="div2 content" style="float: right;">
//dynamic content
</div>
HTML is auto generated so in the markup, div1 originally comes first than div2. Not advisable to change the order (place div2 above div1) since many pages use the same layout. See code above
There is my proposition. Using media queries, find the largest width that you want your divto stay side by side.
In your html, place your div like this (the right one before):
<div class="div2">
div 2
</div>
<div class="div1">
div 1
</div>
The css used to display those div should look like this:
.div1 {
float: left;
width: 25%;
}
.div2 {
float: right;
width: 75%;
}
Finally, to display your left div below the right one, your should add in you css something like this:
#media all and (max-width: 480px) {
.div1, .div2 {
float: none;
display: block;
}
}
Here is a jsfiddle that demonstrate this coding. You only have to resize your browser to see your left div going right under your right one.
I would use a media query to change the CSS styles applied to each of those divs when the viewport is sized to where you want the change to occur. Then float div 1 to the right, float div 2 to the left and give div 2 a big enough right margin that it pushes div 1 down to the next row.
Can anyone assist me with the following div layout? I have tried a couple of solutions, however, the only way i have been able to accomplish this is using tables.
I had a look at Holy Grail 3 Column Layout, however, this layoyt is not 100% height, and header is not fixed, i also need only the content to scroll, the sidebars needs to be fixed 100% height
It seems the answers here ignored most of your requirements. I stumbled upon this because I am having a rendering issue with the same layout you are after. I forked the fiddle above to show you:
http://jsfiddle.net/RsRf9/2/
The major difference is that the entire body is scrollable, not just the tiny area in the center (I think this is what you are after).
Aside from cleaning up styles that weren't doing anything (like floats while position fixed), the major change is to the center col - all you should need is this:
.center{margin:100px 200px;}
The other change is how you get that "height 100%" effect on your sidebars - my trick is to do this:
.left,.right{width:200px;top: 100px; bottom: 0px;position: fixed;}
Instead of height 100%, I simply tell it to stretch from top 100 (the bottom of the nav) to bottom 0 (the bottom of the page)
That will push the content bellow the top nav and in between your two fixed side bars.
I have created a working fiddle as per your requirements:
Here is working fiddle - UPDATED to include fixed header ONLY TOP BAR IS FIXED
The important thing to note is the structural layout of the divs... notice that the .center is AFTER the .right
<div class='wrap'>
<div class='head'>Header</div>
<div class='bodywrap'>
<div class='left'>left</div>
<div class='right'>right</div>
<div class='center'>center center center center center center center center center center center center ... blah</div>
</div>
</div>
and the css is:
JUST HEADER FIXED:
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%} << UPDATED for fixed header
.bodywrap{margin-top:100px;width:102%;margin-left:-1%} << UPDATED - Terrible hack and you may find something more elegant
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;}
.right{float:right;}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
HEADER AND SIDEBARS FIXED (Also was able to fix dirty hack for .left and .right undersizing
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%}
.bodywrap{margin-top:100px;margin-left:-8px}
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;position:fixed}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;margin-right:191px}
.right{position:fixed;right:0}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
Here is with top and sides fixed center scroll liquid center column (and no gaps on .left and .right)
It's basic use of floats but the structural markup layout is key ;)
I use the YUI grids style sheet for this kind of layout. It is tried and tested and works in multiple browsers.
This is actually quite easy to do in a rudimentary sense, you don't need tables (or table-cell) but mixing px and % sizes can be problematic. If you stick to % your page will resize better anyway. Handling the cross browser issues takes a bit more CSS tweaking, but there are plenty of grid solutions out there that implement tried and tested solutions even for IE6 and frameworks like twitter's bootstrap will offer a lot more on top.
In other words, this is a solved problem, but here's a quick example of how you can get there by hand;
<div class="container">
<div class="header">
header
</div>
<div class="left">
left
</div>
<div class="main">
content
</div>
<div class="right">
right
</div>
</div>
And the CSS;
html, body, .container
{
height:100%;
}
.container
{
background-color: pink;
}
.header
{
background-color: yellow;
height:50px;
}
.left
{
background-color: red;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.right
{
background-color: blue;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.main
{
background-color:#fefefe;
float:left;
height:100%;
width: 80%;
overflow-y:scroll;
}
And of course the Fiddle
Using % sizing will also allow you to approach a more responsive design that works for tablet and mobile. Again, many of the grid frameworks out there are 'responsive' in design.
You can use scrollToFixed plugin for left-sidebar and right-sidebar fixed and center column content only scroll up side and downside.
For demo scroll use below link
http://bigspotteddog.github.io/ScrollToFixed/
And one more thing use Bootstrap for design UI.
Include Bootstrap CSS and JavaScript in your page header part
<div class="container">
<div class="col-md-12">
<div class="col-md-3" id="left-sidebar">
left-content
<div>
<div class="col-md-6" id="center">
center content
</div>
<div class="col-md-3" id="right-sidebar">
right-content
</div>
</div>
</div>
You can modify as per your requirement. I just give you general hint.
Just write below script for scrolling
$(document).ready(function(){
$('#right-sidebar').scrollToFixed({
marginTop: function() {
return 5;
},
limit: function() {
return (
$('#footer-widgets-bg').offset().top - $('#right-sidebar').outerHeight(true)
);
},
zIndex: 1,
removeOffsets: true
});
});
Hopefully I can explain this well, as I haven't in the past.
I am looking to achieve something like this...Divide a wepage into three and put a title in the center.
|TitleLeft|Title|TitleRight|
So assume title is width:500px. Title left and right will change dependant on window size. Simple enough by setting it to 500px and then margin: 0 auto;. This is how I have the content of a page, but the title should stretch left while still being centered on the page (or left aligned within that 500px boundary). So assume title has a background of orange. TitleLeft should also have a background of orange.
Maybe this will help (it uses tables and is badly aligned...I want to avoid tables if possible!) as it shows roughly what my aim is.
http://jsfiddle.net/CmWRu/
If I understand your question correctly, you're looking for:
Middle column is a fixed with, centered on the screen
Left and right columns will always expand leftward and rightward, respectively, to fill out remaining available space, even if the screen re-sizes
Headings will always be centered in their respective divs.
OK, first some HTML (I'm using presentational markup to make this easier to follow...you'll want to decide what markup is semantically relevant for your project:
<div id="wrapper">
<div id="left">
<h2>Title Left</h2>
</div>
<div id="center">
<h2>Title Center</h2>
</div>
<div id="right">
<h2>Title Right</h2>
</div>
</div><!-- wrapper -->
A little CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#left, #right {
background: #FF8C00;
}
h2 {
text-align: center;
}
#center {
width: 500px;
float: left;
background: #e0e0e0;
}
And some jQuery:
//document ready function
$(document).ready(function(){
//on page load, call the resizeColumns function
resizeColumns();
//and also call it whenever the window resizes
$(window).resize( resizeColumns );
//we define the function
function resizeColumns(){
//grab the width of the wrapper and save it to a variable
var windowSize = $('#wrapper').width(),
//same thing for the width of the div with id of "center"
centerSize = $('#center').width(),
//windowSize - centerSize = the remaining width of the screen.
//Divide that by 2, and that's how wide each remaining column should be.
//We save that value to a variable
fluidSize = (windowSize-centerSize)/2;
//Now just set the width of the left and right columns equal to fluidSize
//and float them to the left.
$('#left, #right').width(fluidSize).css('float','left');
}
});
I'm trying to convert my site from using tables to just using css and divs but I'm running into a lot of problems with trying to figure how to exactly do it, I've been looking for tutorials on centering a site with css and how to put divs side by side but I can't really find one that does both and I keep getting confused by how to exactly achieve this, I asked around a bit and I got told to use absolute positioning but still I can't really wrap my head around this.
So basically how would I arrange the 2 central div side by side while keeping the whole thing centered in the browser? The following image is the layout I'm trying to achieve:
the blue boxes are eventual other stuff I might want to put in them, such as a blog requiring again the use of side by side divs.
right now I have the following layout:
<div id="wrap">
<div id="banner"> banner </div>
<div id="navbar"> navigation links </div>
<div id="body"> stuff </div>
<div id="footer"> stuff </div>
</div>
General idea: http://jsfiddle.net/JjbJE/
A little specific but provide you a great adventure to learn HTML | CSS : http://jsfiddle.net/JjbJE/3/
float:left|right this property does the side by side trick
clear:both this property clear away the float property
Other things are pretty easy to learn, just head to W3Schools
First you need a main container to center everything. Then two separate divs. See the HTML below:
<div id="main">
<div class="box">Left Box</div>
<div class="box">Right Box</div>
<div class="clear"></div>
</div>
Here is the CSS you will need:
#main{
width:960px;
margin:0 auto;
}
.box{
width:450px;
float:left;
border:solid 1px #000000;
}
.clear{
clear:both;
}
Hope that helps.
Here's my general overview on converting to a CSS based layout - if you have a table based layout, this is a good plan - in the end you can do more, Google will like you more, and it's much cooler.
My strategy is to look at all the groups of things on your page. Whatever needs to go into a group together, put inside a div. Assign this div a class and/or id to style it. If the divs are grouped, put them together in a div too.
In your case, you have two chunks of content to group inside of divs. Style them to be the size and shape you like, background, border, whatever is needed. Then group them together in an additional div, and center it. This and the rest of the page content can go inside a container div, which will determine the width of the page, how it's aligned, etc.
One possibility is to have a centered wrapper class and contain the divisons inside of that:
<div class="wrapper">
<header></header>
<div id="middle">
<div class="main-article clearfix"></div>
<aside></aside>
</div>
<footer></footer>
</div>
Then to style, center the wrapper, float the aside and main-article:
.wrapper { width: 1024px; margin: 0 auto; /* the auto centers it */ }
header, footer, aside, { display: block; }
.main-article { width: 50%; float: right; }
aside { width: 50%; float: left; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
Note: This is untested, and uses the clearfix from the HTML5 Boilerplate.
Update 01.22.2014: This "Holy Grail Layout" has ben solved by Flexbox. Check out Solved By Flexbox for more information on recreating this layout (and many more).