I have variable-width HTML layout with a fixed-width menu to the left of a content <div> of variable width (set by css max-width and min-width). For very narrow browser windows I would like the content to wrap beneath the menu, and I am currently achieving this by setting float:left on both menu and content.
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 200px; float: left; border: 1px black solid">Menu (200px wide)</div>
<div style="max-width: 800px; min-width: 300px; float:left; border: 1px black solid">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>
In this example, wrapping of the content div currently occurs as soon as the browser viewport is smaller than 1000px (menu width + content max-width). I would like to have the width of the content reduce first, and have the content wrap beneath the menu only when viewport is smaller than 500px wide (menu width + content min-width)
Is there a way to achieve this, either with my current arrangement of floated <div>s, or otherwise?
Please check if this is the behavior you want.
DEMO
JSFiddle
HTML
<html>
<head>
<title></title>
</head>
<body>
<div class="menu">Menu (200px wide)</div>
<div class="content">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>
CSS
.menu {
width: 200px;
float: left;
border: 1px black solid
}
.content {
max-width: 800px;
min-width: 300px;
margin-left: 200px;
border: 1px black solid
}
#media all and (max-width: 500px) {
.menu {
float: none;
}
.content {
margin-left: 0;
}
}
I suppose this is what you want: http://jsfiddle.net/joplomacedo/WXFQz/
The solution is a simple media query - below a screen-width of XYZpx do this. If you've never heard of it before here's an article about it http://css-tricks.com/resolution-specific-stylesheets/
For those of you who can't see the fiddle, here's the html and css :
HTML:
<div class="container"> <!-- it's possible to do it without this extra element. it's simply more intuitive this way -->
<div class="menu"></div>
<div class="content"></div>
</div>
CSS:
.container {
max-width: 1000px; /* your self defined 800px max-width for the content-div + 200px from the .menu's width */
min-width: 200px;
}
.menu,
.content {
height: 200px;
}
.menu {
float: left;
width: 200px;
}
.content {
margin-left: 200px; /* same as '.menu's width */
}
#media (max-width : 400px) {
.menu {
float: none;
width: auto;
}
.content {
margin-left: 0;
}
}
there is a demo of this from css-tricks:
http://css-tricks.com/examples/PerfectFluidWidthLayout/
I hope this is good for you.
Related
I want an image with the size of 250x50px to resize itself (go smaller) according to the window size, in other words, make it responsive.
The #wrapper holds the content for the whole page. The #headerholds the image and the navigation bar.
I know this may be easier with the use of #media screenbut I am looking for a pure CSS approach.
Here is what I am currently using:
HTML:
<div id="wrapper">
<div id="header">
<div style="max-width:500px;">
<img id="logo" src="images/logo.jpg" alt="logo" href="#">
</div>
</div>
CSS:
#wrapper{
width: 100%;
height: auto;
}
#header{
height: 100px;
min-width: 300px;
border-bottom: 1px solid black;
}
#logo{
float: left;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
you have a few issues in your code,
don't use inline-styles,
put the border-bottom in child div of #header
no need for IE hacks
no need for a min-width here.
Note: I don't see why you need this image to get smaller, lets see, its 250x50, when the lower screen are 320px so already fits perfectly
here is a snippet
#wrapper {
width: 100%;
border: dashed red 1px
}
#header > div {
max-width: 500px;
border-bottom: 1px solid black;
}
#logo {
max-width: 100%;
height: auto;
display: block
}
<div id="wrapper">
<div id="header">
<div>
<img id="logo" src="//placehold.it/250x50" alt="logo" />
</div>
</div>
</div>
First off, using #media screen is a CSS approach. But if you don't want that, you can just relative units like em or % and give a min-width:
#logo {
width: 20%;
min-width: 100px;
}
thing is, you already put some limits by setting the header to min width 300px and the div inside to max width 500px, so if you want to have more flexibility with those as well, consider different units too.
I have a sidebar div that takes up 12% of the total screen width (set as a css property). I also have an <h1> block within this div, with a title. When I switch monitors to a smaller one, the sidebar ends up being skinnier, resulting in the title to extend OUT of the sidebar.
How can I format so that the text will always stay within the line? ("MY TI..." is fine for a result)
If the title text is known, you may be able to using viewport units vw for the font-size either in the original style or in the media queries.
You would also need to set the sidebar width to vw too, or a percentage value to make it all responsive.
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
float: left;
width: 15vw;
}
.sidebar h1 {
font-size: 4vw;
text-align: center;
}
<div class="sidebar">
<h1>MyTitle</h1>
</div>
jsFiddle
Another solution would be using CSS ellipses, replace the overflow text with "...".
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
width: 15%;
float: left;
}
.sidebar h1 {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="sidebar">
<h1>MyTitle MyTitle MyTitle</h1>
</div>
jsFiddle
There is no 100% sure way when it comes to CSS but the title should normally go onto two lines which would be better than what its doing in your screen shots. Post your code if you want someone to look at that.
What you should do though is use media queries to make the sidebar wider when its on a smaller screen:
.sidebar
{
width:12%;
}
#media screen and (max-width: 600px) {
.sidebar
{
width:30%;
}
}
Here is an example
http://codepen.io/nathanfelix/pen/KzZPGy
Also, here you can read more about media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Please try like this:
<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>
.sidebar {
border-right: 1px solid black;
height: 600px;
width: 186px;
}
In a Nutshell:
This is what i want to achieve: https://jsfiddle.net/Pintolus/faz88ayh/33 (you have to resize the result window to see the effect) but the #Content Div should fill out the rest of the screen-space next to the #Sidebar.
The Sidebar should still move UNDER the #Content on small screens.
This is what i want to achieve:
There should be 3 divs:
#Sidebar, which is on the left side and has a fixed width
#Content, which is on the right side and has a fluid width
#Footer, which is on the bottom of the page and is full width
That is not a big deal, but i want the #Sidebar to move under the #Content on small screens. This alone is also not a big deal and can be achieved by using Bootstraps Push- and Pull-Classes.
The problem is, that i have no idea how to combine both issues.
I want the sidebar to be fixed width (until it moves down) AND to move under the content-div.
This is the code for the left sidebar moving under the #Content:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-md-push-3" id="content"></div>
<div class="col-md-3 col-md-pull-9" id="sidebar"></div>
</div>
<div class="row"
<div id="footer"></div>
</div>
</div>
CSS: (Just for demo)
#sidebar {background: #CCC; height: 150px;}
#content {background: #111; height: 100px;}
#footer {background: #F00; height: 100px;}
See the fiddle here (You have to resize the results window).
Now i want the Sidebar in this fiddle to be fixed width (for example 100px).
Please help, this drives me crazy.
PS: position: absolute for the sidebar is no solution, because it will overlap the footer (due to different height).
Not sure how your push/pull works, bu I assume it's classes that appear on both your divs.
I wonder whether it would be easier to do that with media queries.
Anyway, here's a way to do it (sorry, my knowledge of bootstrap is close to nil, so I went for a very simplified piece of code):
http://jsfiddle.net/txLaukqm/1/
HTML :
<div id="sidebar"></div
><div id="content"></div>
<div id="footer"></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-size: 0; /* to fight the space before the footer due to inline-block */
}
body * {
font-size: 1rem; /* to reset the font-size */
}
#sidebar {
display: inline-block;
background: #CCC;
height: calc(100% - 100px);
width: 100px;
vertical-align: top;
}
#sidebar.hidden {
display: none;
}
#content {
display: inline-block;
background: #111;
height: calc(100% - 100px);
width: calc(100% - 100px);
overflow: auto;
vertical-align: top;
}
#content.full-width {
width: 100%;
}
#footer {
background: #F00;
width: 100%;
height: 100px;
}
I am trying to create simple web page using divs. I have read a lot of articles, but everythere width and height of divs is specified in px. Maybe I don't understand something, but maybe it is better to specify this attributes in percantage ?
I have tried, but received not what expected.
I need to get such result
Here is my html
<!DOCTYPE HTML>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="style/stylesheet.css" />
</head>
<body>
<div id="container">
<!-- HEADER -->
<div id="header">
<div id="logo">Logo</div>
<div id="top_info">Top Info</div>
<div id="navbar">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
</div>
</div>
<div id="content_data">
<div id="banner">Banner</div>
<div id="left_col">Left column</div>
<div id="content">Contnent area</div>
<div id="right_col">Right column</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
And here is css file
#container {
width: 90%;
margin: 0 auto;
background: #fff;
}
#header {
width: 100%;
height: 60px;
border-bottom: 1px solid #c7c7c7;
background: #333;
}
#logo {
float:left;
width: 40px;
height: 40px;
margin: 10px;
background: #ccc;
}
#top_info {
float: right;
width: 100px;
height: 40px;
background: #666;
border: 1px solid #c7c7c7;
margin: 10px;
}
#navbar {
height: 20px;
clear: both;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbar ul li {
clear: both;
}
#footer {
padding: 20px;
clear: both;
}
#navbar ul li a {
font-size:12px; float: left;
padding: 0 0 0 20px;
display: block;
}
#banner {
background: #666;
height: 120px;
clear: both;
}
#content {
width : 60%;
}
#left_col {
float: left;
width: 20%;
height: 200px;
border: 1px solid #333;
color: #FFF;
background: #000;
}
#right_col {
background: #000;
float: right;
width: 20%;
height: 200px;
border: 1px solid #333;
color: #FFF;
}
But get next result. If set width of container id in pixels it works great.
Please help to solve the problem if its possible.
And give some advices how to build responsible pages, maybe some articles or books.
Thx.
UPDATE
I have changed width to 50% and it works. I guess this is because of parrent div has width 90%, so 20%(left) + 20%(right) + 50% (content) = 90%. Am I right ?
The problem is that left and right columns have set border 1px. It makes their width 20% + 2 px (left and right 1px border). Also content area should be floated too.
EDIT: if you want these borders, set width of columns as follows:
width: calc(20% - 2px);
Using percentages is one way to create a responsive web page but the better way is by using Media Queries.
Take a look at CSS3 media queries.
They are exactly what you need. All you need to do is specify some maximum or minimum screen dimensions in your case for each media-query. This way, you can design how your site looks on mobile devices, tablets, computers, etc. and they need not all be the same!
Something that looks good on a big screen like that of a computer need not necessarily look good on a mobile device but using media query, you can design separate versions for both devices!
For example, you execute some CSS only for desktop computers using min-width
#media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/
body {
background-color: lightblue;
}
}
#media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/
body {
background-color: yellow;
}
}
This way, your webpage looks different on desktop computers and looks different on mobile devices and tablets.
Also, see this great link.
Yes, you are right.
Your percentages should add up to 100%
20%(left) + 20%(right) + 50% (content) = 90% (not 100%)
You could make the left and right percentages 25% each to get 100%. That should work fine.
The percentage is with respect to its direct parent. So it doesn't matter if parent is set to 90%. It's because of the 1px border on the side divs. which makes the divs a little bigger than 20%, going over 100% of parent.
You can solve this by make content little smaller to make space for the extra 4px due to the 1px borders on both side divs:
#content {
width : 58%;
float: left;
}
It is cleaner to float all divs left. You'll get the same result.
I have a item (e.g. a div tag, which takes 1/3 of the screen-width and has a minimum width of 500px and a maximum width of 700px. Beside it, there is another item which takes the rest of the screen. If I just assign a width of 66% it works fine as long as the height of the other item does not take one of the max values, at which point an overflow happens or the item just lets space out.
Any ideas who this is done by html without building an overly complex javaScript script?
best Regards,
Stefan
Edit Code:
This sould provide a simple example, As long as the site is under 500px, both are 50% of the screen, but if it gets larger, the right side (marked with world) should fill out more than 50%.
<html>
<head>
<style type="text/css">
* {
border: 1px solid black;
}
html,body,.fullheight {
height: 99%;
width: 99%;
}
table {
table-layout: auto;
}
.minfield {
max-width: 250px;
border: 1px solid red;
overflow: hidden;
}
.leftfloat{
float: left;
}
.maxsize{
height: 99%;
width: 49%;
}
</style>
</head>
<body>
<div class="fullheight">
<div class="leftfloat minfield maxsize">
<p>hello</p>
</div>
<div class="leftfloat maxsize">
<p>world</p>
</div>
</div>
</body>
Demo|FullScreen
possible duplicate : Make a div fill the remaining screen space
and another:
How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)
EDIT:
Look what i did using one of the solutions i provided earlier:
<html>
<body>
<div class="fullHeight">
<div class="minField maxSize"><p>hello</p></div>
<div class="maxField maxSize"><p>World</p></div>
</div>
</body>
</html>
* {
border: 1px solid black;
}
html,body,.fullHeight {
height: 99%;
width: 99%;
}
.maxSize{
height: 99%;
}
.minField{
float:left;
width:250px; /* This is a must so you could define min/max */
max-width:250px;
width: expression(this.width > 250 ? 250: true); /* IE Hack for max-width */
background-color:#ff0000;
}
.maxField {
margin-left: 250px;
background-color:#00FF00;
}
jsFiddler Code | jsFiddler FullScreen