How do I get fluid div height as % of width?

This question follows on from a different discussion I had but is on a different issue so apologies for starting a new thread.
I have a responsive layout with a header div which is set as a percentage of the screen width.
I have a background which is set to fill as cover.
This works great, but I need to maintain a ratio of something like 7:1
So is there a way of setting an equation in the css so that the height of the div is determined as something like:
height:12% of width;
Thanks
Terry

Ah, you've found some interesting css there.
Here's something fairly similar without the :before selector ...
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Responsive Header</title>
<style>
#wrapper {
    position: relative;
    width: 100%;
#aspect {
    padding-top: 18%;
#header {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../img/refinery.jpg);
    background-size: 100% auto;
</style>
</head>
<body><div id="wrapper">
    <div id="aspect"></div>
    <div id="header">
        Your content here
    </div>
</div>
</body>
</html>

Similar Messages

New to CS6 Dreamweaver, creating a "Responsive Website" having trouble getting fluid divs to behave

Trying to create a "Responsive Website" and I'm having trouble getting my fluid divs that I create to "break" their link from the "Boilerplate" .
I'm using a "Fluid Grid layout Div" to create a section that has a transparent background of rgba(0,0,0,0.3) and that's perfect, then I add two more "Fluid Grid layout Div's" inside the transparent one to create a 2-column part in the section and that's where the trouble is.
None of the "formatting" I've set for the text in my ID's or Classes are being used - just reverts to what's in the "Boilerplate" i.e. "p,h2,h3" and I can't get it to "break" it's link the "Boilerplate" so I can apply my formatting.
I have been able to select my formatting at times but it is ignored and uses what's in the "Boilerplate".
Kept trying different ways to get it to work and now I've so many of both the ID's and Class's that their not all showing up as an option to be able select them.
I'm missing something basic and after two days it still escapes me.
Please somebody, tell me what I'm missing.
Frustrated

FluidGrid Layouts are not easy to learn. You need a good grasp of fundamental RWD concepts including CSS Media Queries. Keep your layout simple and be patient. The first time I used FGLayouts, I had to start over 9 times before I got acceptable results.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Best advice for beginners:
Build Mobile Layout first. Everything else is based on this primary layout. Then build Tablet layout and finally Desktop. Don't worry about content. Just build the layout & save often during development.
DO NOT TAMPER with the boilerplate.css or FGLayout.css code. Even experts can break the layout in a hurry. Use a separate external style sheet for content and typography styles.
If you're using CS6 ver 12.0, you cannot nest divs inside other divs. Everything must be inside the .gridContainer like this:
<body>
    <div class="gridContainer">
          <div> </div>
          <div> </div>
          <div> </div>
    </div>
</body>
If you care to post a link to your online test page, we can take a look and possibly offer more suggestions.
Nancy O.

How do I get a div to stay the right size and stay in the right position!

Hi,
I have created a blank template, created a css file and linked and now placing div's for my content. I have limited amount of knowledge with css but get by ok.
I have one consistant problem - when creating the layout I first use a container which I need ot hold all my content. The page has a separate colour and the container stays white, I want it to hold all the content together but it keeps disappearing when I upload to web!
other div's within the page also through out and go half way up the page. It all looks fine within the dreamweaver page!
What I am I NOT doing?
Any help would be appreciated.
Thanks in advance

Ok,thanks - the background should be white, with a 0.2 keyline around the edge of the site and the three boxes floating should be under the main content, hope this makes sense!
http://www.newtonclarkepartnership.co.uk/new%20dw/staff_vets.html
thanks

How do I get a layer to be a width/height % of the canvas size?

I am trying to create an action for watermarking. However, I would like to be able to size my logo to be a specific % of the entire canvas size, i.e. 20% width to be a part of my action so that the logo is always proportional to the image size. Is there any way to do this?

Look up the Scott Kelby watermarking script.
Mylenium

How do they get background image to span browser width?

At http://www.archerschoicemedia.com, they have a background image at the top that spans the entire browser width. How is that achieved? What if image isn't as wide as screen resolution, won't it just repeat?
All help with adding a background image that does this - spans the entire browser width - is what I'm after.
Thanks!

What if image isn't as wide as screen resolution, won't it just repeat?
No.
The CSS reads
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
        background:url(../i/backgroundvid.jpg);
        background-position:center top;
        background-repeat:no-repeat;
        background-color:#000000;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
overflow-x: hidden;
overflow-y: auto;
So, the CSS is set to horizontally center the background image and not repeat it.
Plus, on screens wider than 1689px wide, the background color of black (#000000) shows through at the edges creating the impression that the background is endless.

Adobe dreamweaver cc div option not to be seen, how do i get it back?

Hi all,
Am using dreamweaver CC, creating a fluid layout using div's, when a div is selected there is option panel, that allows you to: hide, re-position it, delete it, copy, move up and move down.
This works fine for a while then it disappears and I can't re-size div's or move them around, but now doing manually which would consume more time, which i wouldn't opt for.
Could i please know how do i get back this option panel for div's?

sharath.k wrote:
@Nancy:
Thanks for the reply nancy.
Not able to figure out the connection between, having the DIV editing options being disbaled and if there are errors on html/css layout.
DW does some pretty strange things when it runs into code errors.
For example, placing the letter "x" in the CSS column definitions for a fluid grid layout disables the FGL tools AND brings back Design View in DW CC2014.1. Design View is normally disabled for Fluid Grid Layouts in that version and a single misplaced character defeats DW's detection of FGL entirely.
Other code errors, like unclosed tags, invalid nesting and unclosed quotes can cause problems up to and including making Design View completely blank, even though you have hundreds of lines of html in Code View.
It may not be the problem, but it's definitely worthwhile to validate code frequently to catch small issues before they turn into big ones.

How do I get rid of this annoying tag at the end of my wordpress posts: // ![CDATA[ div id="" class="_mp3rocket_overlay_style" style="left: ; top: ; width: ;

Whenever I post on my blog, this shows up at the bottom:
<pre><nowiki>// <![CDATA[
<div id="" class="_mp3rocket_overlay_style" style="left: ; top: ; width: ; height: ">
// ]]>
</nowiki></pre>
How do I get rid of it?

Does the name mp3rocket ring a bell?? It may be related to a browser add-on. You could check for and possibly disable or remove such an add-on here:
orange Firefox button ''or'' classic Tools menu > Add-ons
Try both the Plugins and Extensions categories.
If it doesn't seem related to an add-on, perhaps it's something added by a Wordpress plugin, or your blog theme. If you provide a link to your blog, a volunteer here could take a look and see whether they get the same text.

How do I center a div on a fluid grid layout. The div is a video player restricted to 630px by 350 px?

I am building a fluid grid website and I have a web player in a <div> that is styled to be no larger than 630px by 350 px. I can't figure out how to get this div to stay center on the page no matter if it is mobile, tablet, or desktop. Can anyone shed some light on this?

Change display to block, apply the margain: auto.

How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape. After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine. Everything seems to be working just fine on the desktop, ignoring IE. Could it be my media query tags?
If anyone knows a solution, it would be much appreciated. Thanks.
Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
@media only screen and (min-width: 481px) {
@media only screen and (min-width: 769px) {
Here is most of my media query CSS:
@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
          max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
          width:100%;
/* Mobile Layout: 480px and below.(smartphone portrait) */
.gridContainer {
          width: 95.4184%;
          padding-left: 0.5907%;
          padding-right: 0.5907%;
#header {
          clear: both;
          float: left;
          display: block;
          margin-left: 0%;
          width: 72%;
          max-height: 0%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
          top: auto;
          padding-top: 0.25em;
#menuHorizontal {
          clear: both;
          float: left;
          width: 118%;
          height:100%;
          margin-left: auto;
          position:relative;
          top:-1em;
          display: block;
#slides {
          clear: both;
          float: left;
          margin-left: 0.1em;
          width: 119%;
          position: relative;
          top: -1em;
          display: block;
                    /*Slides container: Important: Use position:relative; with top:-1em; together to position div.
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear: both;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting
                              slide_container is container size
                              slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
.slides_container div {
          clear: both;
          width: 69%;
          display: block;
          /* Mobile Layout: 480px. (smartphone landscape)
                              Inherits styles from Mobile Layout 480px.
                              Set to clear:none; to allow div to shift up
                              Or set to clear:both; to take a whole row of the screen*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
.gridContainer {
          width: 95.4184%;
          padding-left: 0.7907%;
          padding-right: 0.7907%;
#header {
          clear:both;
          float: left;
          display: block;
          margin-left: auto;
          width:100%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
#menuHorizontal {
          clear:both;
          float: left;
          width: 110%;
          margin-left:auto;
          display: block;
#slides {
          clear:both;
          float: left;
          margin-left: 0%;
          width: 68%;
          display: block;
                    /*Slides container: Important:
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear:both;
          float: left;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting*/
.slides_container div {
          clear:both;
          width:69%;
          display: block;
                    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
                              Set to clear:none; to allow div to shift up
                              Or set to clear:both; to take a whole row of the screen*/
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 95.9456%;
          padding-left: 0.5271%;
          padding-right: 0.5271%;
#header {
          clear:both;
          float: left;
          display: block;
          margin-left: auto;
          width: 100%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
#menuHorizontal {
          clear:both;
          float: left;
          margin-left:auto;
          display: block;
#slides {
          clear:both;
          float: left;
          margin-left: 0%;
          width: 70%;
          display: block;
                    /*Slides container: Important:
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear:both;
          float: left;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting*/
.slides_container div {
          width: 100%;
          display: block;

I found the problem. There is a bug in Safari for iPhone 4. Use code to fix found at http://stackoverflow.com/a/6379407

Wpf/webbrowser:-how to get height,width,scroll height and scroll width of render html/xhtml/xml pages.

hi I am using to web browser control to get height,width,scroll height and scroll width in wpf c#.
Could You please tell me how to achive this information if .pages contain this css on body.
style="-webkit-column-width:800px; margin-right:800px; -moz-column-width: 800px; column-width: 800px; -webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; -webkit-column-rule: 0px solid #000;-moz-column-rule: 0px solid #000;column-rule:
0px solid #000; height:800px; overflow:visible !important; ; margin:0px; -moz-margin:0px;-webkit-margin:0px;display:block;"
I have to get height,width,scroll height and scroll width on on complete event.
this is MainWindow.xaml page
<Window x:Class="WPFWebBrowserInvokeScript.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="820" Width="820" Loaded="Window_Loaded">
<Grid>
<WebBrowser HorizontalAlignment="Left"
Height="800"
Margin="10,10,0,0"
VerticalAlignment="Top"
Width="800"
Name="MainBrowser"/>

</Grid>
</Window>
this MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;
namespace WPFWebBrowserInvokeScript
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
public MainWindow()
InitializeComponent();
private void Window_Loaded(object sender, RoutedEventArgs e)
string strHtml = "";
using (StreamReader sr = new StreamReader("D:/epubunzip/ePub2_Sample03a_USgovernment_SE_Gr9-12_EN_U1/OPS/9780547451381_c01.html"))
strHtml = sr.ReadToEnd();
strHtml = strHtml.Replace("<body>", "<body style=\"-webkit-column-width:800px; overflow:visible !important; -moz-column-width: 800px; column-width: 800px; -webkit-column-gap:
0px; -moz-column-gap: 0px; column-gap: 0px; -webkit-column-rule: 0px solid #000;-moz-column-rule: 0px solid #000;column-rule: 0px solid #000; height:800px; ; margin:0px; -moz-margin:0px;-webkit-margin:0px;display:block;\">");
string str = "<script> function execScript(){return document.body.scrollWidth;}</script></head>";
strHtml = strHtml.Replace("</head>", str);
byte[] bytes = Encoding.UTF8.GetBytes(strHtml);
MemoryStream ms = new MemoryStream();
ms.Write(bytes, 0, bytes.Length);
ms.Position = 0;
MainBrowser.NavigateToStream(ms);
//MainBrowser.NavigateToString(strHtml);
MainBrowser.LoadCompleted += new LoadCompletedEventHandler(MainBrowser_LoadCompleted);
void MainBrowser_LoadCompleted(object sender, NavigationEventArgs e)
//here I am trying to get height,width,scroll height and scroll width
//It's gtting wrong info
WebBrowser webBrowser = (WebBrowser)sender;
//mshtml.htmld webDocument = (mshtml.HTMLDDElement)webBrowser.Document;
//mshtml.HTMLBody webBody = (mshtml.HTMLBody)webDocument;
// var dd = webDocument.InvokeScript("execScript");
// // string script = "document.body.style.overflow ='hidden'";
// // var dd = webDocument.InvokeScript("execScript", new Object[] { script, "JavaScript" });
// var elems = webBrowser.Document.GetElementsByTagName("body");
// System.Windows.Forms.HtmlElement webBody = (System.Windows.Forms.HtmlElement)webDocument.Body;

>>if i am rendering html from MemoryStreamor string in webbrowser control in wpf It's not applying this css
Yes it does. If you for example add background-color: yellow; to the stlyle you will see that the page turn yellow:
strHtml = strHtml.Replace("<body>", "<body style=\"-webkit-column-width:800px; background-color: yellow; overflow:visible !important; -moz-column-width: 800px; column-width: 800px; -webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; -webkit-column-rule: 0px solid #000;-moz-column-rule: 0px solid #000;column-rule: 0px solid #000; height:800px; ; margin:0px; -moz-margin:0px;-webkit-margin:0px;display:block;\">");
If the styles doen't get applied as expected it is a browser issue. The WebBrowser control emulates Internet Explorer in IE7 rendering mode by default. You will have to change some registry settings to change this behaviour. Please refer to the following
links for more information:
http://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version
https://social.msdn.microsoft.com/Forums/vstudio/en-US/cf66e0cd-ab6f-45b8-b230-1d78f26670d2/opening-links-from-wpf-webbrowser-control-in-default-browser-instead-of-ie?forum=wpf
-moz-column-width only works in FireFox for example.
You may also navigate to an actual page and inject some javascript function that for example adds the styles to the body element dynamically or set the style properties of the body element directly:
private void Window_Loaded(object sender, RoutedEventArgs e)
MainBrowser.Navigate(@"E:/Epubs/ePub2_Sample05_Biology_SampleChapter_EN/OPS/ch01.xhtml");
MainBrowser.LoadCompleted += new LoadCompletedEventHandler(webb_DocumentCompleted);
private void webb_DocumentCompleted(object sender, NavigationEventArgs e)
WebBrowser webBrowser = (WebBrowser)sender;
dynamic doc = webBrowser.Document;
//int _scrollWidth = (int)webBrowser.InvokeScript("execScript");
//mshtml.HTMLDocument webDocument = (mshtml.HTMLDocument)webBrowser.Document;
mshtml.HTMLScriptElement script = (mshtml.HTMLScriptElement)doc.createElement("script");
script.setAttribute("type", "text/javascript");
script.innerHTML = "function doSomething(){ /* do something here... */ }";
//add script to the head
dynamic head = doc.getElementsByTagName("head")[0];
head.appendChild(script);
mshtml.HTMLBody body = (mshtml.HTMLBody)doc.getElementsByTagName("body")[0];
body.style.background = "yellow";
//set any body.style property here...
webBrowser.InvokeScript("doSomething");
That's about it as far as WPF is concerned.
Please remember to mark helpful posts as answer and/or helpful.

How can I get the image width and height stored in database?

Hi!I write s servlet to display images store in database.but how can I get the image width and height?

Have you tryed using PJA or a similar library?
I presume you get java.lang.NoClassDefFoundError on the line :
Toolkit.getDefaultToolkit();?

How can I get the height of an UIComponent programmatically?

How can I get the height of an UIComponent programmatically? In my case the component is a Panel Box which has bindings to a backing bean. But it seems the RichPanelBox does not have have method like getHeight()

Use setInlineStyle(java.lang.String inlineStyle) method.
RichPanelBox panelBox;
panelBox.setInlineStyle("height:400px");
Thanks,
Navaneeth

No width/height set for items.This will cause an infinite loop. Aborting....... How do I get out of this?

How do I get out of this?

What are you talking about? The width/height of what? Is this some sort of error message? If so from what?

How to get fluid layout for Dreamweaver CS5?

CS 5 is not have Fluid Layoout,how to get fluid layout for Dreamweaver CS5?

For Responsive Web Designs (RWD), you can do it manually with CSS Media Queries. David wrote a detailed tutorial below.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Or you can jump start your RWD projects with one of these popular Frameworks.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O.

How to get the actual height of JEditorPane?

I have a basic question on the JEditorPane. Do I have to show the JEditorPane on a temporary Frame in order to get the actual height? My work around is to show the JEditorPane on a frame, get the JEditorPane height, then dispose the frame. It would be nice if I can get the actual height of JEditorPane without showing the frame.
This is test my code.
import java.awt.*;
import java.lang.*;
import java.net.*;
import javax.swing.*;
public class Test {
public static void main (String [] args) {
double w = 0;
double h = 0;
JEditorPane editorPane = null;
try {
URL url = new URL("file:test.html");
editorPane = new JEditorPane(url);
} catch (Exception e) {}
editorPane.setPreferredSize(new Dimension(400, 700));
w = editorPane.getWidth();
h = editorPane.getHeight();
// output "width: 0 height: 0"
System.out.println("width: " + w + " height: " + h);
// This my work around the get the actual height
JScrollPane scrollPane = new JScrollPane(editorPane);
JFrame frame = new JFrame("TESTING");
frame.getContentPane().add(scrollPane);
frame.pack();
frame.show();
// wait for loading data
try {
Thread.sleep(20000);
} catch (Exception e) {}
w = editorPane.getWidth();
// actual height based on the width and the size of test.html
h = editorPane.getHeight();
// output "width: 597 height: 24320"
// 24320 is the actual height that i want
System.out.println("width: " + w + " height: " + h);
frame.dispose();

This thread uses a PropertyChangeListener to notify you when the page is finished loading.
http://forum.java.sun.com/thread.jsp?forum=57&thread=333171

How do I get fluid div height as % of width?

Similar Messages

Maybe you are looking for