Overflow hidden makes img goes down and clipped

Question

I am trying to code this page.

I don't know how to solve the problem, but it seems that overflow:hidden of #bigf makes image go down and clipped. How to make all those divs inside #bigf fits nicely in one horizontal line? Thank you.

HTML:

<html>
<head>
<title>Title</title>
<meta name="Description" content="desc">
<meta name="keywords" content="keywords">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<link type="text/css" href="style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
</head>

<body>

<div id="wrap">

<div id="top">
    <div class="container">
    <h1>Name</h1>
    </div>
</div> 

<div id="bigf">
<div class="container">
<img src="hydraulik.png" class="hydra">

<div class="sm1">
<div class="textsec">SOMETHING</div>
<div class="textsec">IS SAID HERE</div>
</div>


</div>
</div>

</div>

</body>

</html>

CSS:

* {
margin:0px;
padding:0px;
}

body {
font-family: 'Exo 2', sans-serif;
}

#wrap {
position: relative;
width: 100%;
overflow: hidden;
background: #fff;
}

#top {
height:60px;
}

.container {
width:1160px;
margin:0 auto;
}

#bigf {
height:380px;
background: url(bf.jpg) right no-repeat black;
overflow:hidden;
}

.textsec {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
display: inline-block;
color: #FFF;
font-weight: 600;
padding: 10px 25px;
outline: 2px solid rgba(51, 51, 51, 0.2);
text-shadow: 2px 3px 0px #000;
margin: 0px 0px 10px;
float:right;
font-size:26px;
}

.hydra {
margin-left:25px;
float:left;
}

.sm1 {
margin-top:150px;
}

Can you clarify how you would like it to render? As it does with or without the `overflow`? — Shaggy, Apr 16 '15 at 09:58

score 0 · Answer 1 · answered Apr 16 '15 at 09:58

Try to add following code in your css:

.hydra {
    float: left;
    margin-left: 25px;
    vertical-align: top;
}

No need to remove overflow:hidden just use vertical-align: top;. so that the persons image and text will be aligned to top as expected.

Hope this helps you!

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

Add a clearfix to the #bigf .container.

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

And add the class to the container.

<div class="container cf"></div>

You have floated elements inside there so I recommend you to read the following : What is Clearfix

edited May 23 '17 at 12:22

Community

1
1

answered Apr 16 '15 at 09:59

Joel Almeida

7,939
5
25
51

You should mark this as answer for future viewers, @restless. – Viktor Ek Apr 16 '15 at 10:15

score 0 · Answer 3 · answered Apr 16 '15 at 10:11

Hey it has nothing to do with overflow hidden. The Image of the man jumps down because of div.sm1 the divs in there are floating and messing with the box model.

Depending of what you want to achieve you can give .sm1 a fixed max-width (container size - image size) and let it float right, too. This should do the trick.

score 0 · Answer 4 · answered Apr 16 '15 at 10:20

0

Replace your container styles with the below code.

.container {
  width: 1160px;
  margin: 0 auto; 
  display: flex;
}

answered Apr 16 '15 at 10:20

stanze

2,456
10
13

Overflow hidden makes img goes down and clipped

4 Answers4