SO designing a website, I ran into a particular problem.
I want two columns of text next to each other. So I floated (left) the first set of text left, and set a margin of 50% to keep it to one side. But when I did the next column of text, and floated it right (I tried left too), but it appears under the former column of text. I also tried using position:relative and moving it, but it refused to move.
I am guessing this is becuase elements cannot be placed within another elements margin.
Please help, with no Javascript. It is evil.
html
<h1 id="firstcolumn">blahblahblahblahblahblah</h1>
<h2 id="secondthingy">foobarfoobarfoobar</h2>
css
#firstcolumn {
float: left;
margin: 20;
margin-left: 15px;
margin-right: 50%;
border-right-style: solid;
border-right-color: black;
border-right-width: 3px;
font-size: 200%;
}
#secondthingy {
float: right;
}
The following should get you two columns of left aligned text:
#firstcolumn {
float: left;
margin: 20;
max-width: 50%;
margin-left: 15px;
border-right-style: solid;
border-right-color: black;
border-right-width: 3px;
font-size: 200%;
}
#secondthingy {
float: right;
text-align:left;
width:45%;
}
use a <div class="wrapper"></div> and fix a width to it.
then put two <div class="column"></div> into that that are float: left and have those two columns set to 50% of the wrapper.
then put your text into each of the columns.
I believe this is what you were attempting to do. if not, please elaborate.
Absolutely.
#secondthingy {
left:50%;
position:absolute;
}
You can remove the 2 extra margin values on #firstcolumn to get the desired result:
#firstcolumn {
float: left;
margin-left: 15px;
border-right-style: solid;
border-right-color: black;
border-right-width: 3px;
font-size: 200%;
}
#secondthingy {
float: right;
}
I think the margining was taking up too much space and causing the h2 to be pushed down a line.
Related
I have an assignment where I have to create a website that looks like:
example site
I have created this so far:
I cant remove the white space in between the two divs. I use float:left and float: right
this is the CSS code:
#Vsebina {
width:auto;
position: relative;
left: 200px;
top: -22px;
}
#Vsebina #Prvi.Vrh, #Drugi.Vrh, #Tretji.Dno, #Cetrti.Dno, #Peti.Dno, #Sesti.Dno {
width: 400px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
}
#Vsebina #Prvi.Vrh, #Drugi.Vrh {
border: 2px;
border-style: dashed;
border-color: red;
max-height: 200px;
}
#Vsebina #Prvi.Vrh p, #Drugi.Vrh p{
height: 140px;
overflow-y: scroll;
}
#Vsebina #Drugi.Vrh, #Cetrti.Dno, #Sesti.Dno {
float: right;
}
#Vsebina #Prvi.Vrh, #Tretji.Dno, #Peti.Dno {
float:left;
}
The HTML is normal layout, I haven't done any styling in HTML, only the content is there. The file is also too wide, so it makes it vertically scrollable, which is something I want to also get rid off. Thanks.
Float left pulls the content to the left of its parent div and float right pulls the content to the right of its parent div.
Seeing by the css code you just need to apply float left. Remove float right to get the desired result.
-Thanks
Im creating a website for a guild I am apart of, and whilst creating this page, Im trying to have a div within a div, the dark div (contentBox) for holding the lighter divs (contentSection), which in turn, hold text. However, when altering padding of the contentSection div, it also moves the contentBox div. Ill provide screen shots so you can see what I mean.
Html is simply:
<div class="contentBox">
<div class="contentSection">
<h2> We have TeamSpeak!</h2>
</div>
</div>
CSS is:
.contentBox{
background-color: #1E1E1E;
border-color: #080808;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
height: 100vh;
width: 70%;
margin: 0 auto;
}
.contentSection{
background-color: #4B4B4B;
height: 30%;
width: 85%;
margin: 110px auto;
padding-top: 5px;
border-radius: 2px;
padding-left: 15px;
}
What I want it to look like:
What it ends up looking like:
I apologise if im too vague, just ask if you have questions.
Question has been Solved, adding overflow: auto fixed the problem!
Why this is happening
The effect you are seeing is due to collapsing margins. Adding overflow: auto creates a new block formatting context which keeps borders within the edges of the containing block.
Adding padding also prevents margins from collapsing. In your top image, you have padding, so the margin on h2 and the inner div are contained within the outer block. With no padding, the margin of inner elements collapse with the margins from the outer div's.
try this
is it ok?
.contentBox {
background-color: #1E1E1E;
border-color: #080808;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
height: 100vh;
width: 70%;
margin: 0 auto;
}
.contentSection {
background-color: #4B4B4B;
height: 30%;
width: 85%;
margin: 110px auto;
padding-top: 5px;
border-radius: 2px;
padding-left: 15px;
padding-top: 50px;
}
<div class="contentBox">
<div class="contentSection">
<h2> We have TeamSpeak!</h2>
</div>
</div>
i have problem with displaing divs inline on mobiles. So code works fine in PC's but when i visit my website in mobile i just dont display divs in right way.
Image div is above the div with text (should be inline). This is not case of width because even if i change width of image to just 5px, this small image is still above not right next to.
Example: http://www.filmypodobnedo.pl/matrix/
Whole thing is about listing of similar movies to chosen one (in example matrix), listed movies (IMAGE + TEXT should be displayed inline, that works on PC but not on mobile).
HTML:
<div class="podobny_film">
<div id="zdjecie_podobne">
<img class="featured-project-image" width="100" height="150" alt="Filmy podobne do Equilibrium" src="http://www.filmypodobnedo.pl/photos/Equilibrium.jpg">
</div>
<div id="tekst_podobne">
</div>
CSS:
.podobny_film {
float: left;
width: 80%;
color: #555555;
border-style: dashed;
border-width: 1px;
border-color: black;
padding: 10px;
}
#zdjecie_podobne {
width: 120px;
float: left;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
}
add display:inline-block to #zdjecie_podobne and #tekst_podobne
The div "podobny_film" contains div "zdjecie_podobne" with fixed pixel width and div "tekst_podobne" with percentage width. Try to use a percentage width for the div "zdjecie_podobne" and for the image as well, then it should not break.
#zdjecie_podobne {
width:24%; /*together with tekst_podobne that's 99% so be aware of any margins or paddings that might sum up > 100%!*/
float: left;
}
.featured-project-image { width:100%; }
This should work :) :
#zdjecie_podobne {
width: 120px;
float: left;
display:inline-block;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
display:inline-block;
}
I am new to posting on this site, so please excuse any errors I may make.
So as my question states, I'm essentially looking for a way to dynamically expand divs. So far I have a container div with three columns inside it. Each of the columns have a link to some javascript that sets it to disply:none. What I'm looking for a way to do is, for example, if I was to click the hide button in the center column, I want the two outer columns to expand to take up the space left behind. Perhaps a way to increase the width of the two from 33% each to 50% upon hiding the middle one.
So that the two other divs essentially share the newly created space between them.
Here is my html and css as it is just now:
HTML:
<div id="col2outer">
<div id="col1">
<p>test</p>
Hide
</div>
<div id="col2mid">
<p>test</p>
Hide
</div>
<div id="col2side">
<p>test</p>
Hide
</div>
</div>
CSS:
#container #col2outer {
height:200px;
width: 870px;
float: left;
margin: 0;
padding: 0;
}
#container #col1 {
height:200px;
width: 33%;
float: left;
border-width: 0.5mm; border-style: groove;
-moz-border-radius: 15px;
border-radius: 15px;
}
#col2outer #col2mid {
height:200px;
width: 33%;
float: left;
border-width: 0.5mm; border-style: groove;
-moz-border-radius: 15px;
border-radius: 15px;
}
#col2outer #col2side {
height:200px;
width: 33%;
float: left;
border-width: 0.5mm; border-style: groove;
-moz-border-radius: 15px;
border-radius: 15px;
}
Thank you in advance for any help, and apologies if this question has already been asked
Hy!
You can try something like:
Click on hide button:
$(document).ready(function(){
$('button').click(function(){
$('#col1').css("display","none");
$('#col2mid').css("width","49%");
$('#col2side').css("width","49%");
})
});
This is very simple way for resizing divs...
if you want to click on coloumn and then hide/show and resize you will need to rename your columns, or your code will be long...
EDIT:
Something like this:
http://jsfiddle.net/pbnkH/
I'm on Win XP but this problem occurs on Firefox, IE, and Google Chrome. I want to align two DIVs on the same horizontal plane. I want the div on the left to occupy 24% of the screen and the div on the right to occupy the rest. Everything looks fine when my browser is maximized, but when I click the resize button to make the window smaller, the two DIVs are no longer on the same plane. The top of the right DIV appears beneath the bottom edge of the left DIV (the left boundary of the right DIV is still correctly aligned just after the right boundary of the left div).
How can I make both DIVs appear on the same horizontal plane, even when the window is not maximized? Here is the HTML I'm using ...
<div class="header">
<img src="logo.gif"/>
</div>
<div class="container">
<div id="contents">
<div class="categoryPanel"></div>
<div class="productDetailsPanel"></div>
</div>
</div>
and here is the CSS ...
.header {
width: 100%;
height: 63px;
background-color: #333366;
}
.container {
width: 100%;
}
.categoryPanel {
height: 600px;
width: 24%;
float: left;
margin: 10px 5px 0px 0px;
background-color: green;
}
.productDetailsPanel {
height: 600px;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
float: right;
margin: 10px 10px 0 5px;
}
Thanks, - Dave
One way to kind of achieve the layout you want is to stop floating .productDetailsPanel, and give it a left margin of 25% (i.e. the width of .categoryPanel, plus spacing between them). (You’ll also want to remove the top margin on .categoryPanel.)
http://jsfiddle.net/uSbAs/
But that does mean the spacing between your columns will be defined as a percentage of the .container, rather than a fixed number of pixels.
On .productDetailsPanel, remove float: right and add overflow: hidden, job done; it's exactly what you asked for.
http://jsfiddle.net/thirtydot/KjZ8Q/
The reason overflow: hidden helps in this case is not obvious, read this.
In order for it to take up the entire space you would need to either fill it with something or provide a width. I've create a jsfiddle to show the results. Essentially I modified the .productsDetailsPanel by adding a width: 75%; removing the float:right; and modifying your margin: 10px 0 0 0;
Here is the new css for .productsDetailsPanel
.productDetailsPanel {
height: 600px;
width: 75%;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
margin: 10px 0px 0 0px;
float: left;
background-color: red;
}
http://jsfiddle.net/rhoenig/qXvag/
This could work (float: left):
.productDetailsPanel {
height: 600px;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
float: left;
margin: 10px 10px 0 5px;
}