i have following block of the code on my page
<div style="width:100%; ">//div0
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div2
Image 2
</div>
</div>
what i want is, these two div should combine to make a larger div. as their width is divided to 50% each, they should be positioned LEFT AND RIGHT TO EACH OTHER, but in reality, the div2 is positioned BELOW the div1
can somebody explain me what should i do? and what is the problem with my simple code?
This is a very basic css issue. What you should look into is the float property in CSS. Without floating, all elements on the page will be positioned one after another.
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>
That should achieve what you want.
EDIT: actually the above wouldn't work either. Because you have a border. Think about is this way. Your page has 100% width. If your page is 1000px wide. Your divs will each take up 50% or 500px of the screen estate. Your border will take up 4 x 2 = 8px or 0.8% of the page. In total you'll add up to 101.6% of the page. Which will force the divs to load one after another.
To actually witness the effect of floating left and right, remove the border or reduce the width:
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>
<div style="width:50%; background:#f1f1f1; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; float: right;">//div2
Image 2
</div>
Also note that your depending on your page width, your percentage will have different effects. The 45% and 4px border isn't going to play along nicely all the time. If you want full screen perfectly positioned left and right box, it's better to do it without the border and do additional styling inside each div.
Related
I have two questions, hope its not a problem putting them in one post.
Question1
I have a border I want to stretch across the full screen but cant get it to work. I have tried width: 150%, which is okay for the right side, but leaves the left as before. I then added margin:- 100% but that naturally caused issues with items with the div. My code is below. Also im guessing the code I tried would be considered a hack? I am trying not to get into that habit.
#border{
border-top: thick double #000;
border-bottom: thick double #000;
padding: 1% 0 1% 0;
margin-top: 3%;
margin-bottom: 3%;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
#content{
margin-top: -3%;
}
<div id="wrapper">
<div id="content">
<div id="border">
<!--some small images-->
</div>
</div>
</div>
Question2 I am trying to add a jagged edge with a shadow to the top of a div, I have created the image of the jagged edge and tried using the css3 shadow effect but with no success can someone please advise?
Your #border is inside your #wrapper with max-width:1200px so it's normal it will stop at the 1200-mark. Change the HTML to
<div id="border">
<div id="wrapper">
<div id="content">
<!--some small images-->
</div>
</div>
</div>
and work from there.
Search Google for CSS3 box-shadow for your second problem, lots of examples there!
Some html:
<div style="height: 300px">
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
I want my inner div height to be not greater than parent div's and if it is greater then content div should have scroll, but if it is smaller it should be the same size with it's content.
I've tried to set inner's max_height=100%, but I can't make my content have scroll.
I want to do it without js
UPD: I do not know main div's height (300px is not constant)
UPD2: My main div has "max-height: 100%", so I do not know exact value
Demo:
http://jsfiddle.net/kzfRk/7/
Not sure I understand, but if your scroll bars are not appearing try:
#inner{overflow-y:scroll;}
Is this what you had in mind? (colours are just for ease of viewing) See live here.
css
.container{
height: 300px;
overflow: hidden;
border: 1px solid #000;
}
#inner{
max-height:300px;
overflow-y: auto; border: 1px solid #f00;
}
#title{ background-color: #eed;}
#content{background-color: #fee;}
html
<div class='container'>
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
Do you have a live example? It's difficult to work out what you are trying to do.
Do you want the parent div to fill the screen and the content to scroll withing it? If so, give your parent div a height of 100% and try applying the following style to your inner div:
height:100%; min-height: 100%; overflow:auto;
You set your height then use overflow to control the scrolling.
#inner{max-height:100%;overflow-y:scroll;}
Example: http://jsfiddle.net/calder12/drC3L/ Change the size of the outer div to anything you want, if there is too much content the inner div will scroll.
You need to set the inner div maximum height the same as the root div height. Using your fiddle, copy and paste the CSS below into your CSS file and it will work...
.container{
max-height: 100%;
border: 1px solid #000;
}
.inner{
max-height: 100px;
overflow-y: auto; border: 1px solid #f00;
}
.root{
height: 100px;
border: 1px solid;
}
My html code is
<div style="border:1px solid red; height:140px;">
<div style="width:100px; float:left; border:1px solid blue;">
left
</div>
<div style="width:100px; float:right; border:1px solid blue; ">
right
</div>
<div style="border:5px solid green;">
middle
</div>
</div>
Why does the green border spreads to the 100% of width and covers left and right divs? How to fix it so it covers the only block that starts with the word "middle" and ends right before the word "right"?
Just tried position:relative; but it didn't help.
The example of the code is here:
jsFiddle
Write overflow:hidden to it.
<div style="border:5px solid green;overflow: hidden;">
middle
</div>
Check this http://jsfiddle.net/A6qWE/1/
Add overflow:auto
http://jsfiddle.net/A6qWE/7/ check this demo
add overflow:hidden to the style of the div containing the word middle
Add a margin to the middle div margin: 0 100px
See example of the code # jsFiddle
I want this design:
DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
How do I solve this problem? I've tried stuff like floating left & right, but I just can't get them on the same line.
I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.
My code:
<style="text/css">
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
</style>
and
<div id="mainbulk">
<div id="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
<div id="ads" align="right">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
</div>
I'm encountering this problem:
http://www.screencast-o-matic.com/watch/c6lrXsXyQ
Try the following. ids are used for unique content and should be used once only per page.
Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).
<html>
<head>
<style type="text/css">
.textcontent {
float: left;
border: 1px solid red;
width: 700px;
margin-bottom: 4px;
}
.ads {
float: left;
width: 120px;
border: 1px solid green;
}
.textcontent:before {
clear: left;
}
</style>
</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
</body>
</html>
Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.
HTML:
<div class="mainbulk">
<div class="ads">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
<div class="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
</div>
CSS:
.mainbulk {
padding: 1.5em 2% 1.5em .5em;
border: 1px solid #000;
}
.ads {
width: 7.5em;
float:right;
text-align: right;
border: 1px dotted #f00;
}
.textcontent {
max-width: 40em;
float: right;
border: 1px dotted #00f;
}
I believe I can help!
What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.
Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.
What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.
The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.
There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .
This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!
I am floating a couple divs inside a container div & the first div has a border on the right. It works correctly WITHOUT the border, but when I add the border it all messes up & the text inside the container on the right displays itself under the border from the other div.
To show you what I mean here is a picture:
Here is my code:
<div style="margin: 0px auto; width: 500px; border: 1px solid #000;">
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px;">Resolution/Megapixels</div>
<div style="float: right; width: 250px;">Average Quality Size/Best Quality Size</div>
<div style="clear: both;"></div>
</div>
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px; border-right: 1px solid #000;">0.5 megapixels</div>
<div style="float: right; width: 250px;">3x5 inches/NA</div>
<div style="clear: both;"></div>
</div>
</div>
Edit:
Please disregard. Worked it out as soon as I posted this.
You're border is making the box too wide. Need to set the left div (with the border) to 249 so that it adds up to 250px with the border.
it is because adding a boarder to an element will add the border width to the elements width so your border is making the "3x5 inches" is actually 251px wide forcing it down as it can't fit next to a 250px width element in a 500px container, just reduce one of the 250px divs by 1px to 249px
NVM... I'm a fool. Realized right after I posted this I had to decrease the first div's size by 1 because of the border size.