I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Media query, flex container and its order property should do the trick:
#media(max-width:767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.content {
order: 1;
}
.sidebar {
order: 2;
}
}
Make sure to replace max-width value with your own mobile breakpoint.
Browser support for flex is also pretty decent now.
Assuming:
The two elements have a shared parent element
The content div appears BEFORE the sidebar in the source
You don't have to change the source order, you can achieve this with floats by default.
That is, in your desktop layout:
#content {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 40%;
}
Then, for mobile (using media queries or whatever other mechanism):
#content, #sidebar {
float: none;
clear: both;
}
Inside your mobile media queries set float:none.
Actually, I wanted to set layout like first layout so I had used:
.iconHome{
float: left;
border: 1px solid #73AD21;
width: 50%;
height: 100px;
background-color: aqua;
/*margin: 50px;*/
}
<div class="iconHome1">
</div>
<div class="iconHome1">
</div>
The result is the second layout!!!There fore, I think default "float:left" is not be set on mobile. You can use above way. Hope help you
Edit:
I tried some codes:
.iconHome1{
float: left;
border: 1px solid #73AD21;
width: 50%;/*185px*/
height: 200px;
background-color: aqua;
margin: 0;/*0 0 0 -7px*/
/*clear: left;*/
}
That means "width" & "margin" will effect to layout,although you have to set "float:left". Fix "width:49%", result:
Related
I'm trying to create a new theme in Wordpress. So far I only used child themes or messed around with some php, html and css seperately. I downloaded _s starter theme and right now I'm somewhat failing with the css. I'm trying to move the widget-area/sidebar to the left side, but no matter wat I try it will stay at the bottom of the page, and the content-area will just get decreased to 75%.
This ist what I tried:
.content-area {
float: right;
margin: 0 0 0 -25%;
width: 100%;
}
.site-main {
margin: 0 0 0 25%;
}
.site-content .widget-area {
float: left;
overflow: hidden;
width: 25%;
}
I know this is pretty basic stuff and I feel kind of dumb right now, but no matter what I do the sidebar won't come to the side. I also tried setting pixel width of 200px for content and widget-area. I'll keep trying, but if somebody might know the answer and could help me I would be really happy! I would prefer not to set a z-index.
Thanks in advance,
Carlos
EDIT: this is how it looks like in chrome site inspector
<div id="primary" class="site-main">blabla</div>
<div id="secondary" class="widget-area">blabla</div>
EDIT2: Could it have something to do with the dummy data that I imported? I mean all the dummy content in the widget area should not be a problem, as I set overflow: hidden; am I right?
It’s hard to say without seeing your HTML, but I think your problem is that the content area width needs to be set to 75%.
FWIW, here’s a simple example of a fixed-width sidebar layout using flexbox:
.content {
background-color: lightBlue;
padding: 10px;
}
.sidebar {
background-color: yellow;
padding: 10px;
}
#media all and (min-width: 600px) {
.wrapper {
display: flex;
}
.content {
flex-grow: 1;
}
.sidebar {
flex-shrink: 0;
margin-left: 30px;
width: 260px;
}
}
<main class="wrapper">
<div class="content">
<p>Main content</p>
</div>
<div class="sidebar">
<p>Sidebar</p>
</div>
</main>
I built a theme with underscores and for some reason, they have get_sidebar() outside of the closing tag. They also do not have it inside of tags. What I did was first put get_sidebar() inside of aside tags and move that into after the closing tag. I didn't want to set the main tag to display: flex so I added a wrapper tag (div.sidebar-page) around and , then I set that to display: flex. And since you want the aside\sidebar on the left you can just set the flex-direction to row-reverse.
.sidebar-page {
display: flex;
flex-direction: row-reverse;
margin: 0 auto; /* optional */
}
With this HTML structure:
<div class="site-content">
<div class="site-main">
Main content here.
</div>
<div class="widget-area">
Sidebar content here
</div>
</div>
And this CSS:
.site-content{
width: 100%;
}
.site-main {
float: right;
width: 75%;
}
.site-content .widget-area {
float: left;
overflow: hidden;
width: 25%;
}
You'll have it.
Running example here: https://jsfiddle.net/6a3ow5xq/
So without creating more classes in the css, can you have say for example 3 images in the same class, and give them a percentage of space in-between them?
Or is it only possible to do this, by separating them using margin or padding?
Many thanks.
html:
<!--this would normally contain images -->
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
css:
body {
margin: 0px;
}
.image {
display: inline-block;
background-color: blue;
height: 100px;
width: 200px;
margin-right: 10px;
}
.image:nth-of-type(1) {
margin-left: 10px;
}
use selectors like not selecting the first child and give margin or padding whichever you like
.image:not(:first-child){
margin-right:10px
}
.myClass img{
float:left;
width: 30%;
margin:0 1%;
}
I'm wondering if there is a pure-css way of making divs change alignment when they flow past each other or "wrap" as the window resizes. Two divs on a single row, one floated left the other floated right. On smaller viewports they stack but retain their left and right alignment. I can center them on a media query like this fiddle: https://jsfiddle.net/vrac/gcuekarx/, but the media query isn't ideal because the left-box content is of variable length and thus setting a breakpoint for the media query is only a guess.
Cheers
Html:
<div id="nav_row">
<div id="left_box">Left box with variable content width xxxxxxxxxxxxx
</div>
<div id="right_box">Right box
</div>
</div>
CSS:
#nav_row {
background: blue;
display: table;
width: 100%;
position: relative;
}
#left_box {
background: red;
display: block;
float: left;
}
#right_box {
background: green;
display: block;
text-align: right;
float: right;
}
Media query:
#media (min-width: 250px) and (max-width: 400px) {
#nav_row {
background: yellow;
}
#left_box {
background: purple;
float: none;
text-align: center;
}
#right_box {
background: teal;
float: none;
text-align: center;
}
}
In my opinion the easiest way to change alignment is to use
FlexBox
It's so easy to change the 'wrap' using the flex-wrap.
You can see more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to split the content into 2 columns
using the below CSS
.container2 {width: 320px; height: 100px; display: block;}
.image2 {border: 1px solid #F2F3F4;
float: left;
height: 50px;
margin-right: 6px;
padding: 1px;
width: 50px;}
.image2 img { height: 50px; width: 50px;}
.text2 {width: 230px; height: 100px; float:left; font-size: 13px;}
.clear2 {clear: both;}
here is my page http://www.applicationcatalyst.com/columns/
(but the content is in single column)
Now I would like to know what extra I need to add in the CSS code to make the content
split into 2 columns
Thanks
You should do the following:
Put the following div in one div with class 'ColumnDiv' or something.
(image2 & text2)
so you have this:
<div class="ColumnDiv">
<div class="image2">
<img src="http://www.applicationcatalyst.com/storage/other/cakehealth.png"/>
</div>
<div class="text2">Track and Optimize Your Healthcare.</div>
</div>
<div class="ColumnDiv">
<div class="image2">
<img src="http://www.applicationcatalyst.com/storage/other/greengoose.png"/>
</div>
<div class="text2">Farmville for real life, with wireless sensors.</div>
</div>
<div class="clear2"/>
and in css you need to put the following:
.ColumnDiv
{
float:left;
}
Now your divs will show next to each other.
And i guess .clear2 is for evening out the length of both columns.
If you don't want to make any changes to the HTML, you can do it by doing the following:
Increasing the width of .container2 to hold both content blocks side by side.
Removing the clear: both from .clear2. This allows the content blocks to float next to each other.
The changed rules are below:
.container2 {
width: 640px;
height: 100px;
display: block;
}
.clear2{
clear: none;
}
What you'll then see is that your 2 columns aren't properly centered in the main content area. To fix this, you'll need to update the following 2 CSS rules to give them space:
#sidebar2Wrapper {
display: none;
}
#contentWrapper {
width: 800px;
}
Say I have the following DIVs:
<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>
How can I use CSS to place the sidebar DIV to the right of the main DIV, and set it to, say, 20% of the total width?
I'd also like to have some margins between the four DIVs, so that the layout doesn't look too cramped.
Would like it to work in "all" browsers, including that bastard IE6...
put main and sidebar in the wrapper, you can set the size/location of wrapper and preserve your layout.
#top {
/* top stuff */
}
#wrapper {
width: 800px;
margin: 0px auto; /* centers on page */
}
#main {
float: left;
width: 80%;
margin-right: 10px;
}
#sidebar {
float: left; /* by floating left here you have a greater control over the margin */
width: 20%;
}
#bottom {
/* bottom stuff */
}
use floats, negative margins and padding.
you can find good tutorials on http://alistapart.com about page layouting (i really recommend the holy grail) and it also deals a lot with cross-browser problems
http://www.alistapart.com/articles/holygrail
Try:
html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }
It's important for this kind of thing to use a reset CSS (there are others) as different browses have different default values for things like borders, margins and padding.
<div id="top">Page header</div>
<div id="main">
<div id="content">Main content</div>
<div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>
#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }
It's very very important that you set the doc type to strict, ala thusly:
If you do this, you wont need to clear your CSS (with a few exception) and can simply use the correct box models.
I will answer my own question with a link to this article which was exactly what I was looking for:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/