I have a div stretching the height of my page, with float left, eg:
#leftvignette {
width: 200px;
height: 100%;
float: left;
}
#sitecontent {
margin: auto;
width: 1000px;
}
HTML:
<div id="leftvignette"></div>
<div id="sitecontent">
all other content here
</div>
I want this div to always sit at the left of my content until the window is less then 1000px wide - I dont want the #leftvignette to intrude and cover my content.
Does anyone know a way to do this?
Use CSS Media queries and the CSS clear property to remove the float:
#media all and (max-width: 1000px) {
#leftvignette {
clear:both;
}
}
Anything below 1000px will then have the float: left removed.
#leftvignette {
width: 200px;
height: 100px;
float: left;
background:#000;
}
#sitecontent {
margin: auto;
width: 1000px;
background:#f00;
height:200px;
float:left;
}
.clear{clear:both;}
<div id="leftvignette"></div>
<div id="sitecontent">
all other content here
</div>
<div class="clear">
<!--this will help in clearing float for next comming elements.-->
</div>
I suggest you to create some util classes like for example .clear and use them whenever you need just applying the in html as class.
CSS:
.clear{
clear:both;
}
HTML
<div id="leftvignette" class="clear"></div>
Remember to use it after float; it will clear both sides of your div so no element will be placed to the left and right of your "Box".
In your case is better if you use media queries, like that:
#media screen and (max-width:1000px){
#leftvignette{
clear:both;
}
}
Related
I have 3 div side by side, my problem is that they don't appear as I intended on a mobile phone. The page looks like it should be on a laptop/wide screen.
Here is the page:
http://dennissøderkvist.dk/?page_id=35
So you see there is the div with a contact formular, a div with the google map, and a div with address info. If you open it on a mobile phone, it looks horrible, the last div at the end jumps down. How can I solve this?
Here is my css:
#conHolderDiv
{
float: left;
width: 35%;
}
#mapHolderDiv
{
float: left;
width:40%;
padding-left: 15px;
}
#adrDiv
{
float: right;
width: 20%;
}
The conHolderDiv is the first div, that holds the contactform. The mapHolderDiv is the div that holds the map, and the adrDiv holds the address
As previously mentioned, you could use Bootstrap. Or learn about responsive design.
For your example, with the three column layout you are on about you can use Media Queries to target divs that meet certain screen sizes.
#media only screen and (max-width:1000px) {
#conHolderDiv, #mapHolderDiv, #adrDiv {
float:none;
width:100%
}
}
This will give you a 1x3 layout, rather than 3x3. We are not floating the elements, and assigning a width that takes up 100% of the space.
or you can always use display:table
<div style="display:table; width:100%;">
<div style="display:table-row">
<div id="conHolderDiv"></div>
<div id="mapHolderDiv"></div>
<div id="adrDiv"></div>
</div>
</div>
and the css will be
#conHolderDiv {
display:table-cell;
width: 35%;
}
#mapHolderDiv {
display:table-cell;
width:40%;
padding-left: 15px;
}
#adrDiv {
display:table-cell;
width: 20%;
}
Here i want to use two buttons which cover the entire screen width and the buttons should have equal width. And alo there should not be any space between these buttons.
I tried with the following HTML and CSS codes but i didn't get what i expect;
CSS
#container
{
width:100%
}
#button1
{
width:50%;
}
#button2
{
width:50% 100%;
}
HTML
<div id="container">
<button id="button1">Button1</button>
<button id="button2">Button2</button>
</div>
I tried the code here here the buttons not covering the entire screen size also a small gap is there between these two buttons. How to tackle this issue? Thank you..
Demo: http://jsfiddle.net/abhitalks/XkhwQ/7/
Q1: buttons not covering the entire screen size
The reason(s) are:
The box-model. By default the widths are calculated exclusive of paddings. In order to be safe, you should first set the box-sizing: border-box and reset the paddings and margins.
The container is 100% of what? Better, set the width on parent i.e. body.
You can mitigate this by:
* {
margin: 0; padding: 0; box-sizing: border-box; /* reset */
}
html, body {
width: 100%; /* specify width on parent */
}
.container {
width: 100%
}
button {
width: 50%; /* make the children equal */
}
.
Q2: also a small gap is there between these two buttons
The reason is:
The buttons are intrinsically inline elements and this means the white-space counts.
You can mitigate this in two ways:
Comment out the white-space.
Set the float on buttons.
Example 1 (using comments):
<div class="container">
<button>Button1</button><!--
--><button>Button2</button>
</div>
Example 2 (using floats):
.container > button {
float: left;
}
The demo (http://jsfiddle.net/abhitalks/XkhwQ/7/) covers and illustrates both issues.
.
Both of your buttons should have a width of 50% and be floated to the left or right
#button1, #button2
{
width:50%;
float:left;
}
Use this HTML
<div id="container">
<div class="btn-box"><button id="button1">Button1</button></div>
<div class="btn-box"><button id="button2">Button2</button></div>
<div style="clear:both;"></div>
</div>
& CSS
#container{width:100%}
.btn-box{display:block; width:50%; float:left;}
.btn-box button{display:block; width:100%;}
I think there is a typo on button2 class.
#button2
{
width:50%;
}
Apply float to buttons and make them 50% width:
.container {
width: 100%;
}
#button1,
#button2 {
float: left;
width: 50%;
}
Try This
<style>
.container {
width: 100%;
}
#button1,
#button2 {
float: left;
width: 50%;
background:#dbdbdb;
}
</style>
</head>
<body>
<div class="container">
<div id="button1">First Button Text</div>
<div id="button2">Second Button Text</div>
</div>
</body>
Am sure this is very obvious... but I can't seem to figure it out.
I have two divs that I need above one another when the media width is small, and beside each other when large. The right one is fixed width, and the left is variable. However, when the media width is small, they end up in the wrong order. If I swap around the divs in the html, they no longer line up nicely.
Here is the fiddle. http://jsfiddle.net/CwMTU/2/
HTML
<div class="right"> right content fixed width </div>
<div class="left"> left navbar variable width </div>
CSS
.right {
width: 200px;
float: right;}
.left{
margin-right: 200px;}
#media (max-width: 500px) {
.left {
width: 100%;}
.right {
width: 100%;}
}
I just did it using an extra wrapper div and display:table/table-cell (set back to block in the media query)
http://jsfiddle.net/CwMTU/4/
Change the order of the <div>'s
<div class="left">
left navbar variable width
</div>
<div class="right">
right content fixed width
</div>
And change the float in both classes.. Add a width:100%; with a margin-right of -200px, to get your right div next to it.
.right {
width: 200px;
float: left;
background:green;
}
.left{
background:red;
float:left;
width:100%;
margin-right:-200px;
}
JsFiddle is updated with this:
#media (max-width: 500px) {
.left {
width: 100%;
margin-right:0; <--------
}
Your JsFiddle but updated
I have 2 divs, and I need both of them to have a minimum size of about 300px.
I need the left div to stretch out to the available space, however if the window size is too small, then the right div needs to drop below. This is what I have currently, but Im not sure what to change.
<style>
.bbleft {
min-height: 237px;
overflow:hidden;
}
.bbright {
float: right;
width: 300px;
min-height: 237px;
margin-left: 10px;
}
</style>
This is what you need
http://jsfiddle.net/fxWg7/790/
HTML
<div class="container">
<div class="left">
content fixed width
</div>
<div class="right">
content flexible width
</div>
</div>
CSS
.container {
height: auto;
overflow: hidden;
}
.left {
width: 300px;
float: left;
background: #aafed6;
}
.right {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
min-width:300px;
width: auto;
max-width:500px; /* not neccessary */
overflow: hidden;
}
fiddle
A css3 approach..
Flexible left div.
Right div drops when page too small.
Left div fills up the rest of the space.
HTML
<div class="left"></div>
<div class="right"></div>
CSS
body{
width:100%;
}
body div{
min-width:300px;
float:left;
}
.left{
width: calc( 100% - 310px );
}
simple use this
.bbleft {
min-height: 237px;
overflow:hidden;
float:left;width:100%;
}
I have 2 div in on page
<div id="main"></div>
<div id="panel"></div>
and using float to make main at left, and panel at right
#photos-main {
float: left;
width: 800px;
position: relative;
}
#panel {
float: left;
margin-left: 830px;
position: absolute;
}
I want to let panel fill with the left page space, which css should I use?
Just don't float it, and make it relatively positioned. Take out the margin as well. Floating "main" means that it will simply be to the left of "panel" all the time. If you define "main" how you want, "panel" will automatically take up the remaining space.
#photos-main {
float: left;
width: 800px;
position: relative;
}
#panel {
}
Looks like you're trying to build some layout, right? If that's the case, consider implementing (hence learning from) some of the techniques presented in these links:
40 Tutorials and tips about CSS Layouts
CSS Positioning
The perfect three columns layout
Hope it helps!
You could do it with floating with this approach:
#photos-main {
float: left;
width: 800px;
}
#panel {
float: right; /*to have the panel on the right side*/
width: 100px; /*with a width of 100px*/
}
Then you have to wrap the two Tags with another , which get a total width of both elements.
To clarify this two column layout and put e.g. a footer beneath, put another in your HTML-Structure and set into the css simple a "clear:both;", so the floating will be stopped.
Complete Sample
HTML
<div id="wrap">
<div id="photos-main"></div>
<div id="panel"></div>
<div id="clear"></div>
</div>
CSS
#wrap {
width: 900px;
}
#photos-main {
float: left;
width: 800px;
}
#panel {
float: right; /*to have the panel on the right side*/
width: 100px; /*with a width of 100px*/
}
#clear {
clear:both;
}