I am new to web programming. I want to use multiple column layout where each column will have content corresponding to column title, as used in tweetdeck app http://www.tweetdeck.com/ in my google chrome application. How can I go about doing this.
You can use flexbox to create the desired layout (JSFiddle):
HTML:
<div class="container">
<div class="container__column">Column 1</div>
<div class="container__column">Column 2</div>
<div class="container__column">Column 3</div>
<div class="container__column">Column 4</div>
</div>
CSS:
.container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex; /* applying flexbox layout for all browsers */
}
.container__column {
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1; /* 1 for equal column widths */
}
Your question is a bit vague. Are you asking how to achieve the same sort of layout or do you want to know how to populate a column with content?
If it's the former, you could do something like this:
HTML:
<body>
<div id="container">
<div class="columns" id="div1"></div>
<div class="columns" id="div3"></div>
<div class="columns" id="div2"></div>
</div>
CSS:
body {
padding:0px;
margin:0px;
}
#container {
width:900px;
margin:0 auto;
text-align:center;
}
.columns {
width:280px;
height:250px;
background:#CCCCCC;
}
#div1 {
float:left;
}
#div2 {
margin: 0 auto;
}
#div3 {
float:right;
}
To give each column content it really depends what you're doing. If it's your own content, you could use a database and AJAX to pull in content from PHP scrips.
Related
I am not good at English, so I ask questions using a translator.
I'm sorry.
I use the ScrollMagic library
Created a Mobile Page.
For ScrollMagic to work
html, body's height should be 100%.
Content Inside has an Iframe.
The Position property of the parent DIV of the Iframe is Fixed.
PC: Put your cursor over the iframe, scroll, scroll, and you won't scroll.
Mobile: Put your cursor on the Iframe and touchMove, you can't scroll.
If I scroll "iFrame,"
I want to scroll ".a, .b" instead.
Below is an example source
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="b">
BOTTOM
</div>
<div class="item">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page" scrolling="no"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.a, .b {
width: 100%;
position:relative;
z-index:2;
}
.a {
background-color: red;
height:120%;
}
.b {
background-color: blue;
height:50%;
bottom:0px;
}
.item {
width:100%;
height:100px;
top:20%;
position:fixed;
z-index:3;
}
.item iframe {
width:100%;
height: 100px;
}
jsfiddle.net
Setting the IFRAM's property to "pointer-events: none" will work.
But click should be possible in the IFRAM,
So I'm looking for another way.
If you have any good information, please let me know.
I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
I am trying to convert my site to mobile friendly. The easiest way I believe is to hide certain sections when in mobile view and just show the MAIN CONTENT. The site is general divided up like this:
<div class="main">
<div id="header_holder">
HEADER CONTENT
</div>
<div class="side">
<cfinclude template="menu.cfm">
<div class="sidebot">Title 1</div>
<div class="space10">image 1</div>
<div class="space10">image 2</div>
<div class="space10">image 3</div>
<div class="sidebot">Title 2</div>
<div class="lineG2"></div>
<div class="sidebot">Title 3</div>
</div>
<div class="content">
<div class="cLeft">
MAIN CONTENT
</div>
<div class="cRight">
right content 1
right content 2
<cfinclude template="ads.cfm">
</div>
</div>
<div class="footer">
footer content
</div>
</div>
The CSS:
.main{width:960px;margin:0 auto;overflow:hidden;zoom:1}
.side{
float:left;
width:110px;
margin-right:10px;
}
.sidebot{float:left;width:110px;padding-top:20px;font-weight:bold;}
.content{width:840px;float:left}
.content .cLeft{float:left;width:530px;margin-right:10px;}
.content .cRight{float:left;width:300px;margin-bottom:10px;}
.lineGrey {
border-top: 1px solid #C1C1C1;
list-style-type: none;
padding:20px 0px;
overflow: hidden;
width: 100%;
height: 220px;
}
.space10{float:left;margin-top:10px;}
I want to hide the left side ("side") and right side ("cRight") leaving the MAIN CONTENT intact when in mobile view. According to instructions I am supposed to be able to do so by using #media for example like this:
#media screen and (max-width: 530px) {
.side{
visibility: hidden;
clear: both;
display: none;
float:left;
width:110px;
margin-right:10px;
}
}
Well, it does hide the "side" in mobile mode i.e. when it is less than 530. However, it messed up the original desktop format. The "side" menu is displayed properly on the left, but the rest of the "side" content:
<div class="sidebot">Title 1</div>
<div class="space10">image 1</div>
<div class="space10">image 2</div>
<div class="space10">image 3</div>
<div class="sidebot">Title 2</div>
<div class="lineG2"></div>
<div class="sidebot">Title 3</div>
went to the top of the left main content "cLeft". Similar issue with the "cRight" when in desktop mode when I wrap it with:
#media screen and (max-width: 530px) {
.content .cRight{
visibility: hidden;
clear: both;
display: none;
float:left;
width:300px;
margin-bottom:10px;
}
}
some of the cRight content
right content 2
<cfinclude template="ads.cfm">
went to the bottom of the left main content "cLeft". I am at lost as to what happened. Why would it mess up the desktop mode format?
Q2. If we solve this will this work with older version of CSS? i.e. in older browser IE 7?
Any help is appreciated.
I'm not 100% sure what your question is but if you're trying to get rid of content, cRight and side div , then just paste this code here below your Desktop CSS.
CSS is read by the browser top to bottom so if you add all that other code below your display:none, then you're gonna have some different outcomes than display:none because CSS is read top to bottom.
Hope this helps
#media screen and (max-width: 530px) {
.side{
visibility: hidden;
clear: both;
float:left;
width:110px;
margin-right:10px;
display: none;
}
.content .cRight{
visibility: hidden;
clear: both;
float:left;
width:300px;
margin-bottom:10px;
display: none;
}
}
I am working on an application that generates dynamic content and displays them on floating divs. Each div takes 49% width of the page. The problem I'm running into is that the height of the divs vary depending on the content.
What I'm looking to do is make the divs on the same row the same height. Any suggestions?
.item {
background: #c4c4c4;
width: 49%;
border: 1px solid black;
float: left;
}
<div id="container">
<div class="item">
Test
</div>
<div class="item">
Hello.
Sample <br>
Content <br>
</div>
<div class="item">
Test<br>
Sample Content
</div>
<div class="item">
Test
</div>
</div>
Using CSS3 flexbox to make the #container adapt flexible box layout.
Default value of flex-wrap is nowrap so it aligns in a single row. Use flex-wrap: wrap to create multiple rows based on item's width.
Current browser support for Flexbox is pretty good: Can I use Flexbox?
#container {
display: flex;
flex-wrap: wrap; /* Wrap after the items fill the row */
/* Safari specific rules */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
}
.item {
background: #c4c4c4;
border: 1px solid black;
width: 49%;
}
<div id="container">
<div class="item">
Test
</div>
<div class="item">
Hello. Sample
<br>Content
<br>
</div>
<div class="item">
Test
<br>Sample Content
</div>
<div class="item">
Test
</div>
</div>
Use display: table on the containing div, and display: block on your "table cell" divs.
Another answer involves using the display: table property in CSS. It is similar to table scaffolding, but allows much more flexibility with CSS and has more browser support than flexbox.
HTML:
<div id="container">
<div class="row">
<div class="item">
Test
</div>
<div class="item">
Hello.
Sample <br>
Content <br>
</div>
</div>
<div class="row">
<div class="item">
Test<br>
Sample Content
</div>
<div class="item">
Test
</div>
</div>
</div>
CSS:
#container {
width: 100%;
display: table;
}
.row {
display: table-row;
}
.item {
background: #c4c4c4;
width: 49%;
box-sizing: border-box;
border: 1px solid black;
display: table-cell;
}
Fiddle:
http://jsfiddle.net/q5jyfuy6/
You can add like height:40px; in your .item class to make height of the divs independent of the content.
.item {
background: #c4c4c4;
width: 49%;
border: 1px solid black;
float: left;
height:40px;
}
Objective
To have the page the page on my website to expand in height according to the dynamic data pushed into the container.
Background
The page has a set of images and text that is populated via a JSON feed. The text is overflowing into the footer because it is not expanding its containing div which would subsequently expand its containing div which would subsequently expand the body. So I need for a specific child div to push its multiple parent divs.
I have searched similar problems on Stackoverflow and attempted various CSS solutions such as giving all of the parent divs a CSS rule of clear:both or even in the HTML inserting a <div style="clear:both"></div> but none of those solutions worked.
So now I am experimenting with jQuery to see if I could find a solution to this problem.
I know I need to create a variable of some sort like
var newHeight = $("#carousel").height();
And that it needs to have push out the height with something like
$(".case").height(newHeight);
This is my current HTML
<body>
<div class="container">
<div class="block push">
<div id="mainContent" class="row">
<div class="large-12 columns">
<h1>Before & After Case Gallery</h1>
<div id="casesContainer">
<div id="carousel"></div>
</div>
<script id="casestpl" type="text/template">
{{#cases}}
<div class="case">
<div class="gallery_images_container">
<div class="item_container">
<div class="gallery_heading">BEFORE</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
</div>
<div class="item_container">
<div class="gallery_heading">AFTER</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
</div>
</div>
<div class="description_container">
<p>
<span><strong>Case Number {{{number}}} {{version}}:</strong></span>
{{{description}}}
</p>
</div>
</div>
{{/cases}}
</script>
The {{{description}}} in the <p> is overflowing into its parent divs <div class="description_container"> then <div class="case"> then <div id="carousel"> then <div class="casesContainer"> then <div class="large-12"> (which is a container in Foundation) then <div class="mainContent"> and so on.
Here is my CSS
html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }
#mainContent {}
#casesContainer {
min-width:310px;
}
.image-navigation {
background: rgb(6,6,6);
color: #fff;
width:100%;
max-width: 640px;
height: 24px;
}
.image-navigation a {
color: #fff;
padding: 6px;
}
.image-navigation-previous, .image-navigation-next{
float:left;
width: 50%;
}
.image-navigation-previous {
text-align: right;
}
.image-navigation-next {
text-align: left;
}
#carousel {
height:auto;
min-height:600px;
overflow-y: auto;
}
.case {
max-width: 640px;
height:auto;
}
.gallery_images_container {
clear: both !important;
}
.item_container{
max-width: 320px;
float: left;
}
.gallery_heading {
background: black;
color: white;
width: 100%;
text-align: center;
}
.description_container {
background: none repeat scroll 0% 0% white;
min-width: 308px;
max-width: 640px;
padding: 6px 6px 12px 6px;
clear: both !important;
}
I realize that #carousel { height:auto; min-height:600px; overflow-y: auto; } is an ugly hack. It was just an experiment.
I hope that I am just completely missing something and this is an easy jQuery fix. Or maybe my HTML and CSS could use a different structure?
Not a complete fix but maybe helpful.
I've used this function but Internet Explore increases the heights on resize.
$(document).on('ready', function() {
// $(window).on('resize', function() {
var height1 = $("#r1c1").height();
if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }
$("#r1c1").height(height1);
$("#r1c2").height(height1);
$("#r1c3").height(height1);
// }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.
});//ready