I have this kind of structure coming from the following code. And I cannot achieve to do the following despite my efforts and reading.
In pure CSS, how may I force X to stick the right border of the container, being under Y2/Y1 divs ?
The container and C do not have a fixed width (I put a fixed width in the code for convenience). All the other ones have fixed width.
.
I
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
font-family:Arial;
}
DIV.container {
width:200px;
height:20px;
line-height:20px;
font-size:9px;
background-color:yellow;
}
DIV.BlocA {
width:20px;
background-color:#AAAAAA;
float:left;
}
DIV.BlocB {
width:20px;
background-color:#999999;
float:left;
}
DIV.BlocC {
width:20px;
background-color:#666666;
float:left;
}
DIV.BlocX {
padding-right:9px;
width:50px;
background-color:#00E9E9;
text-align:center;
float:right;
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}
DIV.BlocY1, DIV.BlocY2 {
width:20px;
float:right;
}
</style>
</HEAD>
<DIV class="container">
<DIV class="BlocA">A</DIV>
<DIV class="BlocB">B</DIV>
<DIV class="BlocC">C</DIV>
<DIV class="BlocY1" style="background-color:red;">Y1</DIV>
<DIV class="BlocY2" style="background-color:green;">Y2</DIV>
<DIV class="BlocX">X</DIV>
</DIV>
</BODY>
</HTML>
I am not sure if this is what your desired result was.
CHECK DEMO
I used clear:both; and float:left; on the elements you wanted to the left. I also wrapped the 'Y' divs so that I could float them side to side.
I share with you the link that changed my life and how I deal with CSS positioning
http://www.barelyfitz.com/screencast/html-training/css/positioning/
To control which div is on top you may give them each a z-index.
I would either float them all in a certain order or I would use position relative/absolute
Related
How do you get CSS to scale down two absolute positioned images, side-by-side, within their own div but inside a parent wrapper?
I have looked at many stackoverflow questions, but could not find an answer for how to deal with two or more images. I have tried multiple CSS examples but to no avail.
I put together a mock example that simulates what I’m trying to do. See http://www.netplayhockey.com/test.php. Please note that there is a reason the images are different widths and in their own div (has to do with some absolute text positioning that I removed for this demo).
The page width is 1024px (image1 598px, image2 426px). If you reduce the width of the browser, I would like both images to scale down. But, instead, the images do not change size. In fact, image2 overlaps image1.
It’s doing what I want when browser width is less than 600px (I picked 600px as an example, I really want this to occur for mobile but not iPad), I want image2 to move under image1. And the images to be centered.
Note: If I use relative positioning and float, I don't get the desired centering results (the images stack when screen is less than 1024px, and they don't center).
Attached is the HTML and CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="footer-wrapper">
<div class="footer">
<div class="footer-left"><img src="image1.png" /></div>
<div class="footer-right"><img src="image2.png" /></div>
</div>
</div>
</div>
</body>
</html>
body {
position:relative;
background:#999;
margin:0;
padding:0;
}
.container {
position:relative;
max-width:1024px;
margin:0 auto;
}
.footer-wrapper {
position:relative;
}
.footer {
position:relative;
}
.footer-left {
position:absolute;
left:0;
}
.footer-right {
position:absolute;
right:0;
}
.footer img {
max-width:100%;
text-align:center;
height:auto;
}
#media all and (max-width:600px) {
.footer-left {
position:relative;
text-align:center;
}
.footer-right {
position:relative;
text-align:center;
}
}
Yes. Thank you! I slightly modified the CSS (removed some stuff that wasn't needed for it to work like I want it). - I had to re-edit, to show CSS code. after I posted my thank you
.footer {
position:relative;
}
.footer-left {
position:relative;
float:left;
width:58.4%;
}
.footer-right {
position:relative;
float:left;
width:41.6%;
}
.footer img {
max-width:100%;
height:auto;
}
#media all and (max-width:600px) {
.footer-left, .footer-right {
position:relative;
float:none;
width:100%;
height:auto;
text-align:center;
}
}
will this work for you ?
http://jsfiddle.net/PR4DE/btzj5dtu/
for future reference:
<div class="grid">
<div class="col-1"><img src="http://www.netplayhockey.com/image1.png"></div>
<div class="col-2"><img src="http://www.netplayhockey.com/image2.png"></div>
</div>
/*style*/
.grid {position:relative;max-width:960px;margin:0 auto;}
.col-1 {position:relative;width:58.4%;float:left;}
.col-2 {position:relative;width:41.6%;float:left;}
#media (max-width:960px) {
.col-1 {width:100%;float:none;height:auto;}
.col-2 {width:100%;float:none;height:auto;}
img {width:100%;height:auto;}
}
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I am working on my portfolio page for class. I am trying to get the web page to adjust with the browser when the browser gets resized. Mainly the navigation links I have in header. Also when screen is in full my navigation links are in the top right corner. But when I restore down the window it is center in middle. What do I do? Any help will be appreciated. Here is my code. If that helps any.
#header,
#main,
#footer{
display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style1 {
text-align: left;
}
</style>
</head>
<body>
<div class="auto-style1">
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li>Homepage
</li>
<li>Tips and Trick
</li>
</li>About me
</li>
<li>Get in Touch
</li>
</ul>
</div>
<div id="main">Main
<h2>A passion for design and a creative mind.</h2>
<h3>Design, Develop, Dream</h3>
</div>
<div id="sidebar">Navigation</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jonathan Mourning</h3>
</div>
</div>
</body>
</html>
You can use the standard resize DOM event. Then at
window.onresize = function(event) {
...
}
you can adjust the elmenets positions and size accordingly.
However In general, you could avoid fixed sizes and provide percentage values for your DOM elements, in order for them to resize automatically under all screen sizes and ratios. For example, if your page has a vertical orientation, change width to 100% and have your #main element always align the center of the screen:
#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}
Here is an example with the code :http://jsfiddle.net/TZGXf/4/
Here is a full screen: http://jsfiddle.net/TZGXf/4/embedded/result/
Instead of using set widths like width: 1000px; use percentage values like width: 100%;. But be careful as this can cause unforeseen problems.
Consider the following code:
div {
width:100%;
height:64px;
border:1px solid #000;
}
.top-fixed {
position:fixed;
}
.middle-fixed {
position:fixed;
top:64px;
}
.bottom {
margin-top:128px; #64+64
}
<html>
<head></head>
<body>
<div class="top-fixed">Top Fixed</div>
<div class="middle-fixed">Middle Fixed</div>
<div class="bottom">Bottom</div>
</body>
</html>
For div.bottom, I am using margin-top property so that it does not overlap with the top-most div. But it also brings div.top-fixed 'down' with itself (see the fiddle).
How can I rectify it? One way is possibly using padding-top property for div.bottom instead of margin-top, but that does not sound elegant.
You missed top 0 in the top-fixed div.
Try this
.top-fixed {
position:fixed;
top:0;
}
Change the CSS of the your .bottom element to:
.bottom {
position:relative;
top:128px; #64+64
}
Add top:0; to your .top-fixed class.
I am trying to make a in window app similar to
http://jsfiddle.net/szfkn/5/ structure but I want it to not overlap on the sizebars/footer/header/content is there a way to do this while still maintaining a fluid layout?
Or any good pointers on keeping content in window without scrolls and fluid.
Steve Sanderson in his blog shared a few pointers on how to generate a nice css layout: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Don't know if it is the answer you are looking for but it is definetely worth reading :)
<html>
<head>
<title>Fluid Layout</title>
<style>
.hBar, .vBar
{
opacity:.5;
position:absolute;
font-weight:bold;
font-family:Tahoma, Arial, Times New Roman;
text-align:center;
}
div
{
display:block;
}
.hBar
{
height:10%;
width:100%;
left:0px;
z-index:5000;
font-size:1.2em;
}
.vBar
{
width:5%;
height:100%;
top:0%;
z-index:3000;
font-size:.7em;
color:Lime;
}
div#TopWrap
{
background-color:#000;
top:0%;
}
div#RightWrap
{
background:#0FF;
right:0px;
}
div#BottomWrap
{
background-color:#F00;
bottom:0px;
}
div#LeftWrap
{
background-color:#FF0;
left:0px;
}
div#ContentWrap
{
padding:7% 0% 0% 8%;
position:relative;
z-index:1000;
}
</style>
</head>
<body>
<div id="TopWrap" class="hBar">
Top Wrap</div>
<div id="RightWrap" class="vBar">
Right Wrap</div>
<div id="BottomWrap" class="hBar">
Bottom Wrap</div>
<div id="LeftWrap" class="vBar">
Left Wrap</div>
<div id="ContentWrap">
<h3>
Fluid Layout</h3>
<div>
#* Content goes here *#
</div>
</div>
</body>
</html>
Can't guarantee browser compatibility, but should get you a good foundation. The example I have provided just pads the content wrapper. You could modify the div#ContentWrap styling to: 'margin:15%;overflow:hidden;'. Be mindful that any padding you place on that container will affect your overall size.
As far as the content scrolling, there are plenty of jQuery plugins out there that can help with the content scrolling. http://jquerytools.org/demos/scrollable/vertical.html seems to have a good example of what you are looking for.
Best of luck!