I'm trying to figure out how to stack two boxes in my view using HTML/CSS, for a mobile web application. I don't want to use JavaScript, or hardcode values anywhere within this skeleton design.
Requirements:
top box is dynamic height, contents need to be absolutely positioned and account for overflow (which is to be hidden if out of bounds)
bottom box is fixed height
http://i.imgur.com/Zun8oIi.png
I've been messing around, and came up with this here. It works in Safari and Firefox. However, what I am not sure of, is that it is valid CSS. Basically, if I deploy this web app, do I have to worry about it breaking in the future because I'm violating some arcane and obscure styling rule? If so... how can I fix the code, so that it's valid?
I'm not concerned about a browser breaking it because they farked up the rendering engine... because it'll get fixed. I'm concerned about whether or not this is valid code to begin with.
Here's the code, there's the CSS styling included in the fiddle
<!-- this is the body of the page, with padding -->
<div class="BodyContainer" >
<!-- define our table -->
<div class="table" style="padding: 0; margin: 0; width: 96vw">
<!-- row -->
<div style="display: table-row; padding: 0; margin: 0">
<!-- cell -->
<!-- this is the cell that needs to be dynamic height -->
<!-- and overflow hidden any possible content as well -->
<div class="cell" style="width: 100%">
<!-- relative inner cell -->
<div style="position:relative; height: 100%; padding: 0">
<!-- absolute hidden cell that takes up the entire space -->
<div style="position:absolute; top: 0; bottom:0; left: 0; right:0; padding: 0; background: yellow; overflow: hidden;">
This text appears on the top
<!-- fixed bottom content -->
<div style="position: absolute; bottom: 0">
This text appears on the bottom of the cell
</div>
</div>
</div>
</div>
</div>
<div style="display: table-row">
<!-- bottom row that's fixed size -->
<div class="cell" style="background-color: red; border-top: 2vw solid black;">
<!-- content that will change on page to page -->
<div style="height: 20vw !important;">
foo
</div>
</div>
</div>
</div>
</div>
Looks solid to me. It's valid CSS3 and I can't find anything to suggest support for the style here will be dropped.
Related
I'm making an instagram story style template. What I have done so far is to define a fluid container and inside it, add three columns with content such as progress bars, a logo, etc.
Everything works fine, except that for some reason, there is a space on the right side of the screen at any resolution. I have tried several techniques, such as adding a width of 100% to the container, removing the padding from the body, with no results.
This is the body and the main components of my template:
<body style="background-color: #000; overflow-x: hidden;">
<!-- Container with background color and 100% height -->
<div class="container-fluid" style="height: 100vh; padding:0px;">
<div class="row align-items-center">
<div class="row">
<!-- Hide on small screens -->
<div class="col-lg-4 d-none d-lg-block" style="background-color: #F4F4F4;">
</div>
<!-- Hide on small screens -->
<!-- Main content -->
<div class="col-lg-4" style="background-color: #fff; height: 100vh;">
...
</div>
<!-- Main content -->
<!-- Hide on small screens -->
<div class="col-lg-4 d-none d-lg-block" style="background-color: #F4F4F4;">
</div>
<!-- Hide on small screens -->
</div>
</div>
</div>
</body>
This is the resulting space. I've colored black so it's more visible.
Here is a link to my snippet, I really need help, I don't know what's going on. Thank you very much in advance. I know that the style should not be inline, it is like this while I am building the site.
Solved adding margin: 0px; padding: 0px; to the row class.
I have created this simple tribute page, with fixed background image.
I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page.
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
However - a strange thing happened - the
.main-content {
margin-top: 130px;
}
margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!
I want to achieve two things:
Having my text offset from the top of the page
Having .darken class applied to the full viewport
How can I achieve this?
CodePen link
Please try this:
Instead of margin use padding.
.main-content {
padding-top: 130px;
}
I'm creating a website and I want each section to take up the full screen. I have:
html, body {
height: 100%;
width: 100%;
margin: 0;
}
and each section has 100% height and width and relative position. Inside the second section, I want to create four divs that take up each corner. They share a class which has height and width 50% and absolute position. I tried to position them individually by selecting each id and giving them top:0 left:0, top:0 right: 0, and so on.
The problem is, the left and right positioning works, but when I try to position the top or bottom, the div will go to the top or bottom of the first section instead of the second. I think it might be an issue with having two 100% divs on top of each other, but I'm not sure. Would really appreciate any advice!
After see your fiddle, i see you wrote wrong the word "position" in class ".work", beside you can add an div clear between two divs ".hero" and ".work", it will work
<!--==== HEADER =============================================-->
<div class="header">
<div class="container">
<ul>
<li>Home</li><!--
--><li>Work</li><!--
--><li>About</li><!--
--><li>Contact</li>
</ul>
</div><!-- container -->
</div><!-- header -->
<!--===== HERO =============================================-->
<div class='hero' data-type="background" data-speed="10">
<div class='name'>
<h1>kdjfkd</h1>
<h2>fdasfdr</h2>
<h2><span >fgafd</span></h2>
</div>
</div><!-- hero -->
<div style="clear:both"></div>
<!-- ============= WORK ================== -->
<div class='work'>
<div class="same2" style="background-color:red; top:0;left:0"></div>
<div class="same2" style="background-color:yellow; top:0;right:0"></div>
<div class="same2" style="background-color:white; bottom:0;left:0"></div>
<div class="same2"style="background-color:green; bottom:0;right:0"></div>
</div>
.work{
height: 100%;
width: 100%;
position: relative;
}
Demo
Edit: not need "clear:both" at all, it still work fine
I'm currently trying to break a child element out of it's parent which holds overflow: hidden.
The reason for me restricting the dimensions of it's parent are purely for a JavaScript hack. I have tried positioning the child however this still breaks the pages structure and position fixed will be uneffective.
This is the closest I have got so far to achieving this:
<div style="position: relative;">
<div>
<!-- Needs to be overflow hidden and 0 width -->
<ul style="overflow: hidden; width: 0px; height: 0px;">
<li>
<!-- Needs to be visible -->
<div style="position: absolute; top: 0px; left: 0px;">
Tab Content
</div>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/0uwv3nyj/
Does anyone know any kind of css hack or workout to solve this while retaining a standard block display to the element?
Thanks,
Simon
I'm not sure I fully understand your question, but try setting the ul visibility to hidden and the div visibility to visible:
ul --> style="visibility:hidden; height:0;"
div --> style="visibility: visible;"
I'm coming from using Dreamweaver, and i would to have 2 fluid divs side by side. In Dreamweaver, you would create the two divs (they would automatically align on top of each other), then you resize them to the grid, and click "move up a row".
Of course, in pure code applications like Brackets there is no visual editor with a button to click "move up a row".
My problem is that when i expand the page, the 2nd div (it doesn't matter about the content, only the second div [out of the two] in the code) will keep moving when the page is resized, as opposed to staying proportional.
Does anyone have any ideas?
Thanks
These are the two divs in quesiton
<div id="soundcloud" class="fluid">
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/2744486&color=ff6600&auto_play=false&show_artwork=true"></iframe>
</div><!-- end soundcloud -->
<div id="content" class="fluid">
<div id="tabs">
<!--TABS-->
<ul>
<li>About</li>
<li>Testemonials</li>
<li>Contact</li>
</ul>
<!--TAB CONTENT-->
<div id="tabs-1">
</div><!-- END TAB 1-->
<div id="tabs-2">
</div><!-- END TAB 2-->
<div id="tabs-3">
</div><!-- END TAB 3-->
</div><!--END TABS-->
</div> <!-- end content -->
Firstly (and I speak from experience), stop using Dreamweaver. WYSIWYG editors do you no favors in terms of web development, and generally lead to unmaintainable, dirty code. You're better off writing HTML/CSS by hand and testing in your target browsers (FireFox, Chrome, IE etc).
Here is some code that will give you two fluid divs, side by side:
HTML
<div class="row">
<!-- .row > div is applied here because this div is an immediate child of the parent-->
<div class="first">
<p>First fluid section</p>
</div>
<!-- .row > div is applied here because this div is an immediate child of the parent-->
<div class="second">
<p>Second fluid section</p>
</div>
</div>
CSS
/* Apply this style to the parent div */
.row {
display: block;
width: 100%;
}
/* Apply this style to the immediate div children of the parent */
.row > div {
float: left;
display: inline-block;
width: 50%;
}
.first {
background: #FF0000;
}
.second {
background: #0000FF;
}
jsFiddle: http://jsfiddle.net/q9JpH/
Make sure you test thoroughly and apply graceful degradation where necessary...compatibility in the browser world is savage!