My pen: http://codepen.io/helloworld/pen/yyoJGR
Why is the white separater and the list-grouping flowing through the divs or the parent row?
<div class="container columnStyle">
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">
<img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
</div>
<div class="col-xs-9 col-xs-height" >
<div class="container">
<div class="row">
<div class="page-header">
<h1>Who is who
<p>
<small>Organization & Processes</small>
</p>
</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">Org Charts </li>
<li class="list-group-item">GAM / KAM Charts</li>
<li class="list-group-item">Process flow</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
.columnStyle{
background: #006AB3;
}
Because you use the class .containermultiple times.
This class has a fixed width of 1170px;
.container {
width: 1170px;
}
you should have only 1 .containerfor the wrapper and then, inside of it, remove the other .container and just use .row
See it in action : http://codepen.io/anon/pen/ogeLRb
Related
I have a nested list and each list item works like a table row (using flex). The nested items i.e. rows are indented from the left so the width is different at different levels. It currently has tree levels but this may change at some point.
I want to:
Align all "columns" other than first one, on a single verticle line, and
Apply % widths on the columns excepts first one.
So far, I have only been able to achieve the alignment part using fixed pixel widths. But I really need to set the column .second and .third width based on % of top-most ul, otherwise the columns would not align perfectly. Fixed pixel widths aren't good for responsiveness.
I have two options in my mind:
Removing the left margin on list items and adding left-margin on .first. But this would mean manually adding borders on each "cell" and also some other code duplication.
Maybe there is a way to use CSS calc() somehow. With recursively rendered list, this seems quite complicated though. I am using this markup in a React.js component and I need to pass the level as prop and then use calc() in inline style. Doesn't look clean.
ul {
list-style-type: none;
padding: 0;
margin-left: 2rem;
}
.row {
display: flex;
border: 1px solid gray;
}
.first {
flex-grow: 1;
}
.second,
.third {
width: 200px;
}
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
I found a simple workaround. For my use case, simply setting the width of the columns to percentage of viewport does the job. i.e. width: 25vw
Now looks nice on both narrow and wider screens. Also quite happy with the browser support: https://caniuse.com/viewport-units
Please compare with above snippet on "Full page" view to see column widths are responsive on this one and are not responsive in the question snippet.
ul {
list-style-type: none;
padding: 0;
margin-left: 2rem;
}
.row {
display: flex;
border: 1px solid gray;
}
.first {
flex-grow: 1;
}
.second,
.third {
width: 25vw;
}
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
I have 3 div with height : 100vh
But with the responsive my imgs overflow. You can check that on the image.
Sorry for my poor english !
This is the html :
<section id="services" class="container content-section text-center">
<div class="col-lg-8 col-lg-offset-2">
<div class="row">
<div class="col-lg-6">
<h2>Services </h2>
<ul>
<li>Covoiturages </li>
<li>Food </li>
<li>Hébergement </li>
</ul>
</div>
<div class="col-lg-6">
<img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
</div>
</div>
</section> <!-- close about -->
<section id="communities" class="container content-section text-center">
<div class="row">
<div class="col-lg-6">
<img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
</div>
<div class="col-lg-6">
<h2>Communities </h2>
<ul>
<li>Texte </li>
<li>Texte </li>
<li>Texte </li>
</ul>
</div>
</div>
</section>
And the css :
#services{
width: 100%;
height:100vh;
background-color: #62b030;
}
#services img{
height:90%;
}
Try to smaller the img to height: 80vh, or calc image max-height: calc(100vh-100px); overflow:hidden for #services might work, too. YOu can also add width, adn height to your img-responsive or your img class.
I am trying to put these two elements side by side. I tried using the float: right or float left, but so far no luck. Here is my html code.
#idd11 {
float: left;
width 100px;
height 100px;
}
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div>
<!--Answer A-->
</div>
</div>
If anybody can help me with it, it would be greatly appreciated. I tried at least :p. I attached a screenshot too: I want to put the A element in the right side of the Items list.
Use display: flex; for the id="MainMenu" . you can then adjust the width and height for its child elements too..
Try learning more about css3 flexbox property
You need three divs to do this. One div to hold the other two child divs. Then float the two child divs next to each other. So put the things you want floated next to each other inside a div and try to float them.
HTML
<div id='parent'>
<div id='child1'>
...
</div> <!-- End child1 div -->
<div id='child2'>
...
</div> <!-- End child2 div -->
</div> <!-- End parent div -->
CSS
#parent{
width: 500px;
}
#child1{
float: left;
width: 40%;
}
#child2{
float: right;
width: 40%;
}
In your code, you have the div you are trying to float to the right within the div you are trying to float to the left. You need to make sure your divs are separated and put into a parent div. Take a look at my example and notice how my divs are separate from each other, but inside a parent div
<div id='parent'> <!-- Look here -->
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
</div>
</div> <!-- End the floating left section -->
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div> <!-- End the floating right Section -->
<!--Answer A-->
</div> <!-- End parent div -->
I'm trying to get a simple grid-like webpage done where there are 8 DIVs spanning across 9 positions.
I've done the following for another part of the website using Bootstrap's grid system without running into any kind of issue (Not the actual content, just a mockup using Photoshop)
What I want to do is this:
Having in mind that when the site is viewed in a mobile device, the order of the elements must be more-or-less preserved. Also Bootstrap standard margins/paddings must be used
Ideally this would be fixed-height DIVs inside of which I'll put an image or some text, depending on which one. The double-height one will contain a picture
<div class="wrapper" id="mypage">
<section class="grid-container service">
<ul class="small-grid grid-col-3">
<li class="col-3">
<div id="subtitle">
SUBTITLE 1
</div>
</li>
<li class="col-3">
<div id="title">
TITLE
</div>
</li>
<li class="col-3">
<div id="subtitle">
SUBTITLE 2
</div>
</li>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../1.jpg')">
</li>
</a>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../2.jpg')">
</li>
</a>
Sample code of the 1st screen
Thank you, I can't figure out how to do it after thinking about it for some time...
Okay.. I think I'm following you, I've just drawn up some sample bootstrap code for you to see what I'm talking about. You can achieve this look by just stripping out relevant padding/margin and using the Bootstrap equal-height columns experiment
I have just stripped out all relevant margin and padding on the nested rows in the example but you can obviously play with these values only cancelling out or amending the vertical/horizontal margin/padding as required for your own use.
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 border">
<div id="subtitle">SUBTITLE 1</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-xs-8 nopadding">
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content...</div>
<div class="col-xs-6 nomargin border">Some More Content...</div>
</div>
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content Below...</div>
<div class="col-xs-6 nomargin border">Some More Content Below...</div>
</div>
</div>
<div class="col-xs-4 border">Content matching height using the 'row-eq-height' class</div>
</div>
CSS
.nomargin {
margin:0;
}
.nopadding {
padding: 0;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.border {
border: 1px solid red;
min-height: 50px;
}
You can see a jsFiddle here
Dropdown1 and Dropdown2 must float to right. Paging must be to the right.
Paging content may reduce and dropdown1 and 2 must adjust accordingly. I tried different ways but unable to get the solution. In mobile device all the three divs must be centered.
We are using bootstrap. Divs are as follows
<div class="row">
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<!-- Title -->
</div>
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 alpha omega">
<div style="float:right">
<ul class="nav">
<li class="dropdown">
Drop Down 2<b class="caret"></b>
<ul class="dropdown-menu " style="text-transform:uppercase;">
<li data-filterkind="$p" data-filtervalue="DESC">
<a href="./" >1</a>
</li>
<li data-filterkind="$p" data-filtervalue="ASC">
<a href="./" >2</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="pull-right">
<!-- Drop down 2 -->
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<div style="float:right" >
<!-- Pagination -->
</div>
</div>
</div>
Please suggest
So like this?
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 text-center heading1">
<p> Heading </p><!-- Heading -->
</div>
<div class="col-sm-6">
<div class="row">
<div class="float text-center">
<div class="col-sm-4">
<p> DD1</P><!-- Drop down 1 -->
</div>
<div class="col-sm-4">
<p> DD2</P><!-- Drop down 2 -->
</div>
<div class="col-sm-4">
<p> PAGINATION</P><!-- pagination -->
</div>
</div>
</div>
</div>
</div>
</div>
Then add the following additional stuff to your custom CSS:
#media (min-width: 768px)
{
.float
{
float: right;
}
.heading1
{
text-align: left;
}
}
FYI - The above is bootstrap, but the additional classes are needed to get the custom result you want.