Using Columns with HTML and CSS - html

I want to have 2 different columns for the content on my website, they way I want it is like this:
http://i.stack.imgur.com/V4uX2.jpg
It shows like that on my computer monitor, but on my mobile it shows up like this:
http://i.stack.imgur.com/H7CNe.png
As you can see, I would like the two sides to always be next to each other and not one under the other as on my mobile.
CSS
#leftSide {
margin-top:80px;
margin-left:200px;
float:left;
width:400px;
}
#rightSide {
margin-top:80px;
margin-left:10px;
float:left;
width:400px;
}
HTML:
<div id="leftSide">
</div>
<div id="rightSide">
</div>

Check the resolution of your mobile. You probably have a screen of width less than 800px while your content needs more than 800px to be displayed.
Also, for 2-column display, the best way is to use float left and right on the two divs. You should read about responsive CSS which can stylize the width of your divs based on the device width.

you could use a few things...
The display block-inline function or you could just float the picture right. Or you could use tables but I personally hate those.
#sidebar {
margin-top:80px;
float:right;
width:400px;
margin-left: 5%;
Make sure that the the total widths don't exceed the width of your parent container. You also might want some padding on the right side of the picture.

Related

How can I prevent a responsive div from going into another div using CSS?

I have some fixed pixel divs on the top and bottom and a responsive one in the middle. How can I prevent it from going into the top div when the screen is adjusted small?
Here is a working example to illustrate the problem. I want to be able to make the browser small and not have the black box go into the red. While maintaining the responsiveness.
<div style="position:relative; height:100px; width:100%; background:red;"/>
http://jsfiddle.net/RHZLr
I would forget absolute positioning in this case. Make all the boxes relatively positioned, and use margins to position the black box as you please. This way responsiveness works as desired.
Working Fiddle
#blackBox{
margin: 0 auto;
height: 200px;
width: 400px;
background: black;
}
Instead of using width:100% try using a fixed width. Fixed widths don't move so you won't have to worry about them invading other divs.
Also!
It might behoove you to use CSS media queries to give the divs a fixed (non moving) position once the screen gets to a certain size.
e.x.
#div1{
position:relative;
left:25%;
width:50%;
}
#media screen and (max-width:600px){
#div1{
width:500px;
height:500px;
}
}
Working Pen!(codepen.io example)

css layout with 3 fixed colums. left and right hidden on low resolution screen

I want to create css layout with 3 fixed columns like you can see on image, but the most important thing that left(1) and right(3) columns must hide on low resolution monitor (or when windows is not full size).
On stackowerflow I found something similar, but the left and right columns is not fixed size. and also text on this example "crash" center design on low resolution window (center column goes down!).
jsfiddle.net/XMg2h/418/
There are certainly other ways to approach this out there, but here's my quick solution, which basically involves juggling some relative and absolute positioning. Here's the styling I used to get (hopefully?) the behaviour you were looking for (HTML remained the same):
.example{
width:300px;
margin:0 auto;
position:relative;
}
.example div{
position:absolute;
width:50px;
top:0;
height:300px;
}
.example div:first-child{
left:-50px;
}
.example div:last-child{
right:-50px;
}
.example div.center{
width:300px;
right:0;
}
The negative right/left of the divs must correspond to the magnitude of each side column's width. Here's a JSFiddle example based on the one you supplied. You'll note that if you resize the window, it will keep the central div, well, centered (up to the point where the window becomes smaller than the central div, after which it is aligned to the left).
I hope this is what you were looking for! If it wasn't, let me know and I'll be happy to try to help you further. Good luck!
You can use media queries:
#media (max-width: 600px) {
.example div:first-child, /* <- and add some classes to your divs */
.example div:last-child{
display: none;
}
}

Centering a fluid absolutely positioned section

So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen

Responsive design for 3divs, 2 div's width in px and other in "%"

I have 3divs left, center, right
The problem is that left need to be 320px, right 150px and center will take the rest of the space.
How can i do this? It need to be 100% response. I dont know how big the screen is, it can vary from 1920 to 1600screen resolution, but left and right need to be fixed.
The examples that has been posted in the comments works, but if you want to make 2 column if the width is max 768 and hide the 3d div with display: none; it will not work with the table example. And the other one with css3 box doesnt either work because it doesnt work in Explorer, there is no pollyfill.
So is there any fix for this or do i need to do it the classic way and compensate with margins and padding etc.......
You can display:table property for this. write like this.
.parent{
display:table;
width:100%;
}
.parent > div{
display:table-cell;
min-height:200px;
}
.left{
width:320px;
background:green;
}
.center{
background:red;
}
.right{
width:150px;
background:yellow;
}
Check this http://jsfiddle.net/BNQfC/1/
OR
You can use CSS3 flex-box property.
Check this http://jsfiddle.net/sjYNy/1/

Menu bar layout solution

I have some problems with creating the correct menu bar layout.
My menu bar is divided to three sections which are:
left (logo), center (menu), right (login information)
There are also two different menus, one is for administrator (few additional buttons - width is 701px) and regular user menu (width is 447px ).
Whole menu bar width is set to 100%.
Now what i need help with is setting the width attribute for each of the sections.
If i set fixed width (px) to center (menu) section, i cant figure out the correct width percentage for other two sections. I also cant set fixed width values for other sections because of the smaller screen resolutions (menu stays wide).
If i set percentage width to center (menu) section, menu might break at smaller screen resolutions.
So what is the best solution?
HTML:
<body>
<div id="main">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
CSS:
#main {
width:100%;
height:77px;
background-color:#373737;
}
#left,
#center,
#right {
height:77px;
}
#left {
float:left;
} /* width? % or px*/
#center {
display:inline-block;
} /* width? % or px*/
#right {
float:right;
} /* width? % or px*/
Admin menu bar:
Regular user menu bar:
You can try this CSS and adjust the each width if you wish in percentage to sum up to 100% of the main div:
#main {
width:100%;
height:77px;
background-color:#373737;
padding:5px;
}
#left, #center, #right {height:77px;}
#left {float:left;background-color:black;width:25%} /*width? % or px*/
#center {display:inline-block;background-color:blue;width:50%; float:left}/* width? % or px*/
#right {float:left;background-color:yellow;width:25%} /*width? % or px*/​
I think you're probably going to have to use JavaScript to resize your elements as needed. There's several solutions but none of them allow for mixing dynamic and static widths.
Floats are out because they will jump around when you lower your screen size. Unless you want to have them fall below the other sections when its too small.
Just think of each div as an individual element instead of them working together. I'd strongly suggest not using a float in this situation if your goal is cross browser compatibility.
Good luck. :)