I have 3 div tags inside a div tag, all I want in same line. That I did using some css, but when I zoom out/in browser content goes in different lines.
css code:
#about{
float:left;
width:33%;
}
.about-panel{
width:100%;
}
html code:
<div class="about-panel">
<div id="about">
<p><img style="width:400px;height:280px;margin-top:0%;" src="/media/Banner.png"></p>
</div>
<div id="about">
<p style="margin-left:12%;"><img style="height:280px" src="/media/roto.gif"></p>
</div>
<div id="about">
<iframe width="400" height="280" src="//www.youtube.com/embed/o3vMWRWPYzE" `frameborder="0" allowfullscreen></iframe>`
</div>
</div>
I want all content as it is in same line even after zoom in/out
How I need the contents to be aligned
A jsfiddle would have been nice but for time being, try display:inline-block; in you about-panel. It throwing up because of missing display type for the div most probably!!
.about-panel{
width:100%;
display:inline-block; /* add this and check*/
}
#about{
float:left;
width:33%;
}
There can only be one id.. change the "about" to class.. That should work!
Related
I need 3 parts: Header, Content and footer for my page in fixed position.
<body>
<div id="header">
<div id="info">
<span id="fa">test</span>
<br>
<span id="en">Honey Koohpayeh Official Website</span>
</div>
</div>
<div id="section">
<div class="img-holder">
<img class="img" src="img/img1.jpg" />
</div>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
CSS:
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#section {
padding:10px;
text-align: center;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
And I'm using java script having two pictures which pic one loads at first then a loading.gif shows and then the second pic shows up.
The problem is when i show the loading, and then show the second pic, the content get empty for a sec and my footer reaches to the header. I need the three parts fixed position and nothing can changes their height. And i wanna use % like header and footer get 20% and the content gets the rest.
One option is to set a fixed height and width while the image loads and remove it when the image is received.
I want to make a make a header with some menu links. The inner div is not taking the
margin from top. Please suggest me how to write the css for this.
<div style ="width:100%; background-color:Aqua; height:100px;">
<div style="width:876px;background-color:Blue;margin:20px auto;height:60px;">
<h3>menu items</h3>
</div>
</div>
Also when I resize the browser (pressing shift+ctrl+M on mozilla) the outer dive does not wrap the inner div properly.
you are probably getting this because your second width is fixed so no matter the browser size, it is never changing whilst the first width changes since it is in percentage
<div style ="width:100%; background-color:Aqua; height:100px;">
<div style="width:70%;background-color:Blue;margin:20px auto;height:60px;">
<h3>menu items</h3>
</div>
</div>
Set the outer-div to
display:inline-block
is this fiddle what you want?
html
<div class ='outer'>
<div class='inner'>
<h3>menu items</h3>
</div>
</div>
css
.outer{
width:100%;
background-color:Aqua;
height:100px;
padding-top:20px;
min-width:876px;
}
.inner {
width:876px;
background-color:Blue;
margin:0 auto;
height:60px;
}
I have design like this :
<div id='container'>
<div class='box'>
<div class='boxleft'>something left</div>
<div class='boxright'>something right</div>
<div class='clear'/>
</div>
</div>
And I set CSS as :
*{margin:0; padding:0}
.clear{clear:both}
#container{width:100%; height:auto; background:#f1f2f3}
.box{width:95%; margin:0 auto; height:auto; background:white}
.boxleft{float:left;width:49%;margin-right:1%;}
.boxright{float:right;width:50%;}
Problem: Background is white of class .box be load later after class .boxleft finished the loading. I now want it load background follow the height of class .boxleft. So, How can I do this?
Thank for your suggestion.
Your problem is a result of the float left and float right without having an height on both boxes inside the main box. Add this to your .boxleft and .boxright:
display:block
That should work.
I am having trouble correctly centering my website
It seems to be centered when I zoom out. but to a user that doesn't zoom out it looks out of place. any suggestions? the site was created with all AP divs it doesn't center correctly even when trying to use the following:
<div align="center">
Try margin:0 auto; for the container div it will center align your div :)
See the example
See the fullscreen view of the result
your design is not correct in my opinion. you must:
<body>
<div id="wrapper">
<div id="header">
from apdiv1 to 31
</div>
<div id="content">*/instead of blockquote*/
put content
</div>
<div id="footer">
put content</div>
</div>
</body>
with css
body{background-image:concrete bkg.jpg}
#wrapper{margin:0 auto}
more more more...
brgds
In css
add property
body
{
text-align:center;
margin:0 auto;
}
I would like to have a specific layout but don't know how to fix it up in CSS.
here is my code:
<html>
<body>
<div id="outer" style="text-align:center;">
<div id="mainContent" style="background-color:red; width:700px; margin-left:130px;
display:inline-block;">
<p>A Lot of Text Here. Yes, A Lot of Text. Gotta Love it. More Text.</p>
</div>
<div id="rightNav" style="background-color:blue; width:130px; display:inline-block;">
<p>Some Text</p>
</div>
</div>
</body>
</html>
Now the problem is:
I want to have the content div be always centre aligned no matter what the window size is and regardless of whether the sidebar is there. The content is around 700px and the sidebar around 130px. The sidebar needs to sit to the right of the content.
Now I have managed to accomplish the above, but the tricky problem is how can I fix this so that when the window size is say 830px (700+130) that all content is visible and half of the sidebar is not cut off due to the content div being centred.
I hope I have explained this clearly enough.
Update: I have update the code to include CSS. As you can see the red section is centered, the blue to the right. This is what I want, expept when the window gets too small, I always have a minimum of a 130px gap on the left which is not what I want. (but had to put it in there to get the layout aligning right)
Something like this may help
<html>
<body style="overflow:hidden;">
<div id="mainContent" style="overflow:auto; position:absolute; top:0px; left:0px; right:130px; bottom:0px;"></div>
<div id="rightNav" style="overflow:auto; position:absolute; top:0px; width:130px; right:0px;"></div>
</body>
</html>
Edited:
#Nathan Arthur was so kind to add a nice fiddle to demonstrate the solution above.
...Demonstration of this in action: jsfiddle.net/2QQtU Try moving the middle divider to see the magic.
CSS
#outer {
position:relative;
width:830px;
margin:0 auto;
}
#content, sidebar {
float:left;
}
#content {
width:700px;
background-color:#afa;
}
#sidebar {
width:130px;
background-color:#faa;
}
That's all :)
*EDIT* just added background-colors to see the example better.
It appears what I want is not possible in a single solution. I will need to use conditional CSS to accomplish this.