Move a fluid div up a row - but not in Dreamweaver - html

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!

Related

CSS Layout - best way to have a wrapper

Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>

Why is child container affecting parent

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;
}

Multiple fullscreen sections with absolute positioned divs inside

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

CSS3 columns - change the way they position content

I have two columns which are created using CSS3 Columns. Here is my code:
HTML:
<div class="container">
<div class="column1">
<!-- content -->
</div>
<div class="column2">
<!-- content -->
</div>
</div>
CSS:
.container {
column-count: 2;
}
All is good so far. However, the way the browser creates the columns is a problem for me. Because it creates them to be equal height, some of the content from .column1 has been shifted into .column2, at the top. Instead of being at the top of .column2, I want it at the bottom. Here is an image to visualise what I mean:
What would I do to shift the content at the top of .column2 (from .column1) to the bottom of .column2? (I cannot move the HTML code, although it's fine to change the CSS so it's not using columns or whatever).

Alignment issue of div in HTML

I have a jquery ui calender that i have placed at left of the page.After calender i have placed second div which is taking full width of the web page.Now i want to add one more div just below the calender but its coming after the second div ..
Here is the link of the image ..
Please see the web page
Here is my HTML..
<div id="datepicker" style="float:left;"></div>
<div id="main" style="float: left; width:83%; margin-left:5px; margin-top:0px;">
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
</div>
<div id="links" style="float:left; margin-left:0px">
<label name="roomOperation" id="roomOperation" style="font-style:normal; font-size:12px;font-weight:bold;"> Room Operation </label>
<br/><br/>
<li>Check in List</li>
<br/>
<li>Check out List</li>
<br/>
</div>
Why is this happening..
Please help me to remove the margin between calender and my hyperlink menu..
If you use position: absolute; on the #links div, and set the CSS top: ; value to the same height as your calendar, plus whatever you want as a gap between the two, say 5px, and the left: 0px; this should work.
You'll also need to surround all 3 divs with a containing div with CSS position: relative to make the absolute positioned div keep within the boundaries of the area you want it to be in.
I also believe you could use float: right; on the documents div and float: left; on the other two, but I'm not 100% sure on this, it's worth a try though.