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;
}
}
Related
I have two div element inside main div element I want those two div float left and the align center of the main div.
Something like this.
[ main div [div1][div2] ]
I have successfully floated the two divs but I am failing to assign the space on both the side. I mean to say align them in center.
code to float left css
.container{
width:100%
height: auto;
}
.img{
width:auto;
height:auto;
float:left;
}
.data{
width:auto;
height:auto;
}
html code
<div class="container">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
if you write text-align:center to parent.It will align their children
thank you for comments
.container{
width:100%
height: auto;
text-align:center;
}
.data{
width:auto;
height:auto;
}
<div class="container">
<div class="img"><img src="https://picsum.photos/200/300"/></div>
<div class="data">data goes here</div>
</div>
You can wrap the img and data div in a div, then float that div right with a 50% width. I prefer not to use floats; flexbox would be a better option in my opinion, but if you like floats, I put some code below you can try.
HTML:
<div class="container">
<div class="dataImgContainer">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
</div>
Add below to the CSS sheet:
.dataImgContainer {
width: 50%;
float: right;
}
I am using the fullPage plugin and everything worked like expected, but then I realized, when I resize the window, there is an unwanted animation. The div container is moving and after a delay it´s getting in the desired position.
Here is my Code:
//HTML structure
<div id="fullpage">
<div class="section">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
<div class="slide active">
<div class="slide-container"></div>
<div class ="slide-container skills"></div>
</div>
</div>
</div>
//CSS
.section {
text-align:center;
}
.slide-container {
float: left;
display: inline-block;
width: 50%;
height: 100%;
}
.skills {
background-color: #CDFF00;
}
I haven't made changes to the fullpage plugin except loopHorizontal: false.
Example on jsfiddle:
http://jsfiddle.net/oodLzLwv/1/
Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>
From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.
You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.
Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/
There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/
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.
I am building a website with content in small divs. They are all floating left so basically it's all tiled. I want a banner every third row. How many content divs are visible depends on the users screen width. I had a solution in JavaScript, but IE doesn't like that.
More graphic: this is what I want:
and on a wider screen things should look like this:
This is what I came up with:
Preview: http://jsfiddle.net/Yqy9B/5/embedded/result/
<div class="row clear">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row clear">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="advert">
Advertisement
</div>
.row {
height:80px; /*height = 10px margin(top/bottom) + 60px height of .box */
overflow: hidden;
}
.box {
width:160px;
height:60px;
float:left;
background:#999;
margin:10px;
display:inline;
}
.advert {
width:485px;
height:60px;
margin:10px auto;
background:red;
text-align:center;
line-height:60px;
}
.clear:before, .clear:after { content:""; display:table; }
.clear:after { clear:both; }
.clear { zoom:1; } /* For IE 6/7 (trigger hasLayout) */
Is that what you are talking about?
http://jsfiddle.net/Yqy9B/5/
Update:
For the overlapping issue in Chrome and Safari, I've added some code that will add some padding for those browsers, as I could not find a more elegant cross-browser solution. To see the version with the additional code, see http://jsfiddle.net/Yqy9B/16/. I've also updated the code below.
Using a combination of clear: and float: properties in CSS, we can space the advertisements down one side and the content down the other. This will allow for the content to flow around the advertisements, which will keep the ads in the same spot on resize, but flow the content boxes below it.
Here's an example: http://jsfiddle.net/cjyoung1/Yqy9B/10/ (update: new example to address overlap: http://jsfiddle.net/Yqy9B/16/)
(Note: I left the spacer as red to show how it works, you can change it to your background color or transparent - but needs to be at least 1px wide to work properly in some browsers)
The CSS:
.box {
width:160px;
height:60px;
margin:10px;
background:#999;
display:inline-block;
}
.advert {
width:100%;
height:60px;
margin:10px auto;
background:red;
text-align:center;
line-height:60px;
display:block;
float:right;
clear:right;
}
.spacer {
float:right;
clear: right;
height: 250px;
width: 1px;
background: #f00;
}
/* **Below are the updates to fix the overlap in other browsers** */
/* fix webkit overlap */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.advert{
margin-top:80px;
}
.spacer{
margin-bottom:-80px;
}
}
/* fix IE6 overlap */
* html .advert {
margin-top: 40px;
}
The HTML:
<!-- floating to right -->
<span class="spacer"></span>
<span class="advert">Advertisement</span>
<span class="spacer"></span>
<span class="advert">Advertisement</span>
<!-- floating to left -->
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>